https://github.com/kutyel/babel-plugin-remove-test-ids

🐠 Babel plugin to strip `data-test-id` HTML attributes
https://github.com/kutyel/babel-plugin-remove-test-ids

babel babel-plugin cypress e2e e2e-testing e2e-tests javascript-testing react-testing selenium testing testing-jsx

Last synced: 5 days ago
JSON representation

🐠 Babel plugin to strip `data-test-id` HTML attributes

• Host: GitHub
• URL: https://github.com/kutyel/babel-plugin-remove-test-ids
• Owner: kutyel
• License: mit
• Created: 2017-10-02T10:01:54.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2023-03-09T10:26:51.000Z (over 1 year ago)
• Last Synced: 2024-10-24T14:44:18.257Z (12 days ago)
• Topics: babel, babel-plugin, cypress, e2e, e2e-testing, e2e-tests, javascript-testing, react-testing, selenium, testing, testing-jsx
• Language: JavaScript
• Homepage:
• Size: 62.5 KB
• Stars: 41
• Watchers: 3
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/funding.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# babel-plugin-remove-test-ids

[![Standard - JavaScript Style Guide](https://cdn.rawgit.com/feross/standard/master/badge.svg)](https://github.com/feross/standard)

[![NPM version](https://img.shields.io/npm/v/babel-plugin-remove-test-ids.svg?style=flat-square)](https://www.npmjs.org/package/babel-plugin-remove-test-ids)

[![Build Status](https://img.shields.io/travis/kutyel/babel-plugin-remove-test-ids/master.svg?style=flat-square)](https://travis-ci.org/kutyel/babel-plugin-remove-test-ids)

[![Coverage Status](https://img.shields.io/coveralls/kutyel/babel-plugin-remove-test-ids.svg?style=flat-square)](https://coveralls.io/github/kutyel/babel-plugin-remove-test-ids)

[![NPM Status](https://img.shields.io/npm/dm/babel-plugin-remove-test-ids.svg?style=flat-square)](https://www.npmjs.org/package/babel-plugin-remove-test-ids)

[![Donate](https://img.shields.io/badge/donate-paypal-blue.svg?style=flat-square)](https://paypal.me/flaviocorpa)

> Babel plugin to remove `data-test-id` attributes from the JSX

## Install

```bash

$ npm install babel-plugin-remove-test-ids --save

```

## Usage

**.babelrc**

```json

{

  "plugins": ["remove-test-ids"]

}

```

... you can also configure it with your attributes!

```json

{

  "plugins": [

    [

      "remove-test-ids",

      {

        "attributes": ["data-test", "data-custom-test-attr"]

      }

    ]

  ]

}

```

## Motivation

In **React Alicante 2017**, [Forbes Lindsay](https://github.com/ForbesLindesay) gave a [talk](https://github.com/ForbesLindesay/end-to-end-testing-react-applications/blob/master/end%20to%20end%20testing%20react%20applications.pdf) about _"End to End testing React applications"_ with [**cabbie**](https://github.com/ForbesLindesay/cabbie) and explained the pattern of adding `data-test-id` props to your components as a good practice for improving testability.

[![video](http://img.youtube.com/vi/veb-xTGZulY/0.jpg)](http://www.youtube.com/watch?v=veb-xTGZulY)

He also mentioned that it would be _"fairly easy to do a Babel plugin"_ to strip those attributes from the actual DOM, if you care enough. :)

Also, other testing tools like Selenium uses a similar approach and could benefit from this plugin as well!

## License

MIT © [Flavio Corpa](https://github.com/kutyel).