# babel-plugin-transform-react-qa-classes > Add component's name in `data-qa` attributes to React Components Edit Latest version **1.6.0** (published 2020-04-14) · MIT license · 0 weekly downloads ## Install ```sh npm install babel-plugin-transform-react-qa-classes pnpm add babel-plugin-transform-react-qa-classes yarn add babel-plugin-transform-react-qa-classes bun add babel-plugin-transform-react-qa-classes ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.6.0 | | Published | 2020-04-14 | | First published | 2017-04-16 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 6 | | Unpacked size | 14.9 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 43 | | Author | davesnx | | Maintainers | davesnx | | Keywords | babel, plugin, react, component, qa-classes | ## Links - npm: https://www.npmjs.com/package/babel-plugin-transform-react-qa-classes - Repository: https://github.com/davesnx/babel-plugin-transform-react-qa-classes - npm.io page: https://npm.io/package/babel-plugin-transform-react-qa-classes ## Dependencies (6) - [pascalcase](https://npm.io/package/pascalcase.md) ^1.0.0 - [babel-types](https://npm.io/package/babel-types.md) ^6.26.0 - [lodash.isstring](https://npm.io/package/lodash.isstring.md) ^4.0.1 - [lodash.camelcase](https://npm.io/package/lodash.camelcase.md) ^4.3.0 - [lodash.kebabcase](https://npm.io/package/lodash.kebabcase.md) ^4.1.1 - [lodash.snakecase](https://npm.io/package/lodash.snakecase.md) ^4.1.1 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 1.6.0 (latest) — 2020-04-14 - 1.5.0 — 2020-03-10 - 1.4.0 — 2019-12-05 - 1.3.1 — 2019-11-23 - 1.1.0 — 2019-01-07 - 1.0.0 — 2018-10-17 - 0.0.5 — 2017-09-22 - 0.0.3 — 2017-04-16 - 0.0.2-rc2 — 2017-04-16 - 0.0.2-rc1 — 2017-04-16 - 0.0.2 — 2017-04-16 - 0.0.1 — 2017-04-16 ## README ## Babel plugin transform React qa classes [![Build Status](https://github.com/davesnx/babel-plugin-transform-react-qa-classes/workflows/publish/badge.svg)](https://travis-ci.org/davesnx/babel-plugin-transform-react-qa-classes) [![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com/) [![npm](https://img.shields.io/npm/dm/localeval.svg)](https://www.npmjs.com/package/babel-plugin-transform-react-qa-classes) This babel plugin adds the component name as a `data-qa` in each React Component.
Before After 
class componentName extends Component {
  render () {
    return (
      <div>
        <div>Hello world</div>
      </div>
    )
  }
}
      
class componentName extends Component {
  render () {
    return (
      <div data-qa='component-name'>
        <div>Hello world</div>
      </div>
    )
  }
}
> This plugin asumes that you are using [React](https://reactjs.org) and [Babel](https://babeljs.io) as a building tool to generate your bundle. ### Why? The idea is to facilitate Automate Testing on Frontend Applications. Automate Frontend highly requires to get the DOMElements and interact with them, adding `data-qa` attributes automatically to all the components will make it more easy, rather than do it by code, with this way you won't have this `data-qa` in production code. On the testing site would need to get the element like that: ```js document.querySelectorAll('[data-qa="component"]') ``` That depends on the Test suit stack, for example with Ruby and [`PageObject`](https://github.com/cheezy/page-object) looks like that: ```ruby div(:component, data_qa: 'component') ``` ### Install ```bash npm install --save-dev babel-plugin-transform-react-qa-classes # or yarn add -D ``` ### Use Inside `.babelrc`: ```json { "presets": ["es2015", "react"], "env": { "dev": { "plugins": ["transform-react-qa-classes"] } } } ``` > Note: Adding this plugin only on `DEV` mode (or `PREPROD`) allows not having `data-qa` attributes on production. You can specify the format of the name that you want and the name of the attribute, inside your `babelrc`: ```json { "presets": ["es2015", "react"], "env": { "dev": { "plugins": ["transform-react-qa-classes", { "attribute": "qa-property", "format": "camel" }] } } } ``` > Note: format can be: "camel" (camelCase), "snake" (snake_case), "kebab" (kebab-case) or "pascal" (PascalCase). #### with CLI ```bash babel --plugins transform-react-qa-classes component.js ``` #### or programatically with [babel-core](https://www.npmjs.com/package/babel-core) ```js require('babel-core').transform(`code`, { plugins: ['transform-react-qa-classes'] }) ``` ## Contributing PRs for additional features are welcome! There's still a few feature that are missing, for example each change of the state of the component is added as a `data-qa-state` into the DOM. Support for more libraries. I recommend checking this [handbook](https://github.com/jamiebuilds/babel-handbook) about how to write babel plugins in order to learn. - Clone the repo: `git clone https://github.com/davesnx/babel-plugin-transform-react-qa-classes` - Fork it & set origin as this repo: `git remote set-url origin https://github.com/YOUR_USERNAME/babel-plugin-transform-react-qa-classes.git` - Create a branch: `git checkout -b BRANCH_NAME` - Do the code - Create a PR to this repo. In order to do the commits I prefer to use [Commitizen](https://github.com/commitizen/cz-cli) and there's a githook setted up when you push it runs the tests. ## Feedback Is your company using it? I would love to know more! Could you answer this small [Typeform](https://davesnx.typeform.com/to/JrKgBc) :P ## License MIT --- _Source: https://npm.io/package/babel-plugin-transform-react-qa-classes · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._