babel-plugin-styled-components-dataset

This plugin automatically adds dataset(data-*) to every component rendered with styled-components using .attrs method for better debugging and (E2E) Testing. For documentations of styled-components please visit the styled-components official website.

Installation

Install the plugin as development dependencies:

npm install --save-dev babel-plugin-styled-components-dataset

Usage

Add the following line to your babel configuration:

{
  "plugins": ["babel-plugin-styled-components-dataset"]
}

Options

key

string, defaults to data-id.

The attrubute name to add.

Example:

in .babelrc

{
  "plugins": [["babel-plugin-styled-components-dataset", { "key": "data-test-key" }]]
}

in path/to/TestComponent/index.js

const Container = styled.div`
  width: 100%;
`;

output:

const Container = styled.div.attrs({ 'data-test-key': 'TestComponent_Container' }).div`width: 100%`;

eventually render to html as:

<div data-test-key="TestComponent_Container"></div>