@welldone-software/babel-plugin-react-add-test-id
v0.0.4
Published
Add attribute on react elements
Downloads
13,033
Readme
babel-plugin-react-add-test-id
Example
in
const Foo = () =>
<Bar>
<div>
</Bar>
out
const Foo = () =>
<Bar data-test-id="Foo-Bar">
<div data-test-id="Foo-Bar-div">
</Bar>
Useful with styled-components
in
const Wrapper = styled.div`...`
const Bar = styled.div`...`
const Foo = () =>
<Wrapper>
<Bar>
</Wrapper>
out
const Wrapper = styled.div`...`
const Bar = styled.div`...`
const Foo = () =>
<Wrapper data-test-id="Foo-Wrapper">
<Bar data-test-id="Foo-Wrapper-Bar">
</Wrapper>
Install
yarn add @welldone-software/babel-plugin-react-add-test-id
or
npm install @welldone-software/babel-plugin-react-add-test-id
Usage
in .babelrc
"plugins": [
"@welldone-software/babel-plugin-add-test-id",
...
Options
| Property | Type | Default | Description |
| ------------------------ | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- |
| attrName | String | data-test-id
| Define the attribute name |
| mode | String | regular
| One of minimal
, regular
, full
|
| ignoreElements | Array of Strings | [div
, input
, a
, button
, span
, p
, br
, hr
, ul
, ol
, li
, img
, form
, h1
, h2
, h3
, h4
, h5
, h6
, svg
, path
, g
] | Avoid adding test id on those elements |
| additionalIgnoreElements | Array of Strings | [] | Add extra ignoreElements |
| delimiter | String | -
| Separate components name with the delimiter |
in .babelrc
"plugins": [
["@welldone-software/babel-plugin-add-test-id", {"attrName": "data-test-id-example"}],