Remove data-test-id
attributes from your production builds.
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.
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"];
Add data-test-id
to your react components
return (
<div>
<p data-test-id="component-text">{someText}</p>
</div>
);
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.