davesnx/babel-plugin-transform-react-qa-classes

What about use <React.Fragment> ?

RUVATA opened this issue · 3 comments

What about use this cool solution for automatically setup QA-locators with React applications that use modern React features as React.Fragments?
as idea: May be set "componentName-fragment-{number}" with index of real JSX node inside Fragment that contains it?

Hey @RUVATA

Fragments aren't actual dom nodes. It wouldn't work if you add any HTMLAtrribute to it, like class or data-qa.

We could detect that the first JSX Element it's a Fragment and try to go to the children, but's it's likely to give unexpected results to the user.

WDYT?

but's it's likely to give unexpected results to the user.

I think, this will be expected behavior for plugin user if make this optional. At the same time this functionality is "must have" to a lot of users (by my mind) because Fragments are often used in actual projects, and more importantly Fragments may be used in project addictions, for example some UI Kit of Components, and current plugin realization is not implement this case by QA coverage.

We have no way to add an attribute to a React.Fragment, since they aren't real DOM Elements. This plugins agregates DOM attributes to the first element of the components (like: div, span, etc...).