Babel plugin for exposing React element name and filename in DOM nodes
npm install --save-dev babel-plugin-react-element-infoThis is useful for auto-generating selectors to run selenium tests.
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-node="MyReactComponent" data-qa-file="myInputFile">
My component contents
</MyReactComponent>
);
}
}.babelrc
without options:
{
"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:
{
"env": {
"development": {
"plugins": [
["react-element-info", {"prefix": "test-prefix"}]
]
}
}
}babel --plugins react-element-info script.jswithout options:
require('babel-core').transform('code', {
plugins: [
'react-element-info',
],
});with options:
require('babel-core').transform('code', {
plugins: [
['react-element-info', {prefix: 'text-prefix'}],
],
});MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent