@vip30/babel-plugin-react-add-test-id NPM

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

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"}],

babel babel-plugin react add test test-id

@babel/types

@everything-registry/sub-chunk-985

0.0.5

2 years ago