Package Exports

babel-plugin-react-data-testid

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (babel-plugin-react-data-testid) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

babel-plugin-react-data-testid

babel plugin for react data-testid attributes

Install

$ npm install --save-dev babel-plugin-react-data-testid
$ yarn add --dev babel-plugin-react-data-testid

Usage

.babelrc.json

{
  "plugins": ["react-data-testid"]
}

Before:

function Div() {
  return <div />
}

const Hello = () => <div>hello</div>

After:

function Div() {
  return <div data-testid="Div" />
}

const Hello = () => <div data-testid="Hello">hello</div>

Note: Does not support class components.

Options

attributes

By default attributes with name data-testid will be added. You can also define custom attribute names via plugin options in your babel config.

.babelrc.json

{
  "plugins": [["react-data-testid", { "attributes": ["data-cy"] }]]
}

function Div() {
  return <div />
}

const Hello = () => <div>hello</div>

After:

function Div() {
  return <div data-cy="Div" />
}

const Hello = () => <div data-cy="Hello">hello</div>

If you need to add multiple attributes, you can define an attributes array as follows:

{
  "plugins": [
    ["react-data-testid", { "attributes": ["data-testid", "data-cy"] }]
  ]
}

Contributors ✨

Thanks goes to these wonderful people (emoji key):

_akameco
💻 📖 🚇 ⚠️

This project follows the all-contributors specification. Contributions of any kind welcome!