babel-plugin-jsx-remove-data-test-id

babel-plugin-jsx-remove-data-test-id

Remove data-test-id attributes from your production builds.

Motivation

It's not usually a good idea to couple our test code with DOM element id's or CSS classnames.

• Finding by an .o-some-class or #some-id selector couples our test to the CSS; making changes can be expensive from a maintainance point of view, whether they are coming from the CSS or the tests
• Finding elements by DOM tag, such as <span /> or <p> can be equally as difficult to maintain; these things move around so if your looking for .first() you might get a nasty surprise

We wanted to decouple our tests from these concerns, in a way that would support both unit level tests and end to end test. Bring in:

data-test-id="some-test-id"

This package give you the ability to strip these test id's from production code.

Install

npm install babel-plugin-jsx-remove-data-test-id --save-dev

Add this to you babel config plugins

plugins: ["babel-plugin-jsx-remove-data-test-id"];

How to use

Add data-test-id to your react components

return (
  <div>
    <p data-test-id="component-text">{someText}</p>
  </div>
);

Define custom attribute name(s)

By default attributes with name data-test-id or data-testid (as used in react-testing-library) will be stripped. You can also define custom attribute names via plugin options in your babel config:

plugins: [
  "babel-plugin-jsx-remove-data-test-id",
  {
    attributes: "selenium-id"
  }
];

Or if you need to strip off multiple attributes, you can define an attributes array as follows:

plugins: [
  "babel-plugin-jsx-remove-data-test-id",
  {
    attributes: ["data-test-id", "selenium-id", "another-attr-to-be-stripped"]
  }
];

Make sure the plugins are part of your babel config, and build away - that's it. data-test-id's (respectively your custom named attributes) will be stripped.