babel-plugin-react-element-info

Babel plugin for exposing React element name and filename in DOM nodes

Installation

npm install --save-dev babel-plugin-react-element-info

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-node="MyReactComponent" data-qa-file="myInputFile">
        My component contents
      </MyReactComponent>
    );
  }
}

Usage

Via .babelrc (Recommended)

.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"}]
      ]
    }
  }
}

Via CLI

babel --plugins react-element-info script.js

Via Node API

without options:

require('babel-core').transform('code', {
  plugins: [
    'react-element-info',
  ],
});

with options:

require('babel-core').transform('code', {
  plugins: [
    ['react-element-info', {prefix: 'text-prefix'}],
  ],
});

License

MIT