Adds React properties
npm install babel-plugin-react-element-info> Babel plugin for exposing React element name and filename in DOM nodes





``sh`
npm install --save-dev babel-plugin-react-element-info
This is useful for auto-generating selectors to run selenium tests.
In
`myInputFile.js``js`
class Foo extends React.Component {
render() {
return (
My component contents
);
}
}
Out
`js`
class Foo extends React.Component {
render() {
return (
My component contents
);
}
}
#### Via .babelrc (Recommended)
.babelrc
without options:
`json`
{
"env": {
"development": {
"plugins": [
"react-element-info"
]
}
}
}
with options. Prefix is the attribute prefix, defaulting to qa (data-qa-). To get data-test-prefix- attributes, set prefix to test-prefix:`json`
{
"env": {
"development": {
"plugins": [
["react-element-info", {"prefix": "test-prefix"}]
]
}
}
}
#### Via CLI
`sh`
babel --plugins react-element-info script.js
#### Via Node API
without options:
`js`
require('babel-core').transform('code', {
plugins: [
'react-element-info',
],
});
with options:
`js``
require('babel-core').transform('code', {
plugins: [
['react-element-info', {prefix: 'text-prefix'}],
],
});
MIT