babel-plugin-remove-test-ids

Babel plugin to remove data-test-id attributes from the JSX

Install

$ npm install babel-plugin-remove-test-ids --save

Usage

.babelrc

{
  "plugins": ["remove-test-ids"]
}

... you can also configure it with your attributes!

{
  "plugins": [
    [
      "remove-test-ids",
      {
        "attributes": ["data-test", "data-custom-test-attr"]
      }
    ]
  ]
}

Motivation

In React Alicante 2017, Forbes Lindsay gave a talk about "End to End testing React applications" with cabbie and explained the pattern of adding data-test-id props to your components as a good practice for improving testability.

He also mentioned that it would be "fairly easy to do a Babel plugin" to strip those attributes from the actual DOM, if you care enough. :)

Also, other testing tools like Selenium uses a similar approach and could benefit from this plugin as well!

License

MIT © Flavio Corpa.