Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

babel-plugin-jsx-remove-data-test-id

Package Overview
Dependencies
Maintainers
1
Versions
24
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

babel-plugin-jsx-remove-data-test-id

babel plugin to remove data-test-id attributes

  • 3.0.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
64K
increased by13.74%
Maintainers
1
Weekly downloads
 
Created
Source

babel-plugin-jsx-remove-data-test-id

Remove data-test-id attributes from your production builds.

Motivation

It's not usually a good idea to couple our test code with DOM element id's or CSS classnames.

  • Finding by an .o-some-class or #some-id selector couples our test to the CSS; making changes can be expensive from a maintainance point of view, whether they are coming from the CSS or the tests
  • Finding elements by DOM tag, such as <span /> or <p> can be equally as difficult to maintain; these things move around so if your looking for .first() you might get a nasty surprise

We wanted to decouple our tests from these concerns, in a way that would support both unit level tests and end to end test. Bring in:

data-test-id="some-test-id"

This package give you the ability to strip these test id's from production code.

Install

npm install babel-plugin-jsx-remove-data-test-id --save-dev

Add this to you babel config plugins

plugins: ["babel-plugin-jsx-remove-data-test-id"];

In some configurations the above will strip out the test attribute before the tests are run, causing them to fail. If this is the case for your project, you'll need to limit the plugin to non-test environments.

{
  env: {
    production: {
      plugins: ["babel-plugin-jsx-remove-data-test-id"]
    },
    test: {
      plugins: ["other-plugins"]
    }
  }
}

How to use

Add data-test-id to your react components

return (
  <div>
    <p data-test-id="component-text">{someText}</p>
  </div>
);

Peer dependency warnings

This plugin specifies Babel 7 as its peer dependency - while it also works with Babel 6 you might want to install @babel/core@6.0.0-bridge.1 to get rid of unmet peer dependency warnings.

Define custom attribute name(s)

By default attributes with name data-test-id or data-testid (as used in react-testing-library) will be stripped. You can also define custom attribute names via plugin options in your babel config:

plugins: [
  [
    "babel-plugin-jsx-remove-data-test-id",
    {
      attributes: "selenium-id"
    }
  ]
];

Or if you need to strip off multiple attributes, you can define an attributes array as follows:

plugins: [
  [
    "babel-plugin-jsx-remove-data-test-id",
    {
      attributes: ["data-test-id", "selenium-id", "another-attr-to-be-stripped"]
    }
  ]
];

Make sure the plugins are part of your babel config, and build away - that's it. data-test-id's (respectively your custom named attributes) will be stripped.

Keywords

FAQs

Package last updated on 06 Feb 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc