babel-plugin-react-element-info-index
Babel plugin for exposing React element name and filename in DOM nodes
Installation
npm install --save-dev babel-plugin-react-element-info-index
The problem solved
This is useful for auto-generating selectors to run selenium tests.
Example
In
myInputFile.js
class Foo extends React.Component {
render() {
return (
<MyReactComponent>
My component contents
</MyReactComponent>
);
}
}
Out
class Foo extends React.Component {
render() {
return (
<MyReactComponent data-qa="elementName_MyReactComponent_Index">
My component contents
</MyReactComponent>
);
}
}
Usage
.babelrc
(Recommended)
Via .babelrc
without options:
{
"env": {
"development": {
"plugins": [
"react-element-info-index"
]
}
}
}
with options. Prefix is the attribute prefix, defaulting to qa
(data-qa-*
). To get data-test-prefix-*
attributes, set prefix to test-prefix
:
{
"env": {
"development": {
"plugins": [
["react-element-info-index", {"prefix": "test-prefix"}]
]
}
}
}
Via CLI
babel --plugins react-element-info script.js
Via Node API
without options:
require('babel-core').transform('code', {
plugins: [
'react-element-info-index',
],
});
with options:
require('babel-core').transform('code', {
plugins: [
['react-element-info-index', {prefix: 'text-prefix'}],
],
});
License
MIT