Registry / testing / babel-plugin-jsx-remove-data-test-id

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

library3.0.0jsnpmunverified

This package, `babel-plugin-jsx-remove-data-test-id`, provides a Babel plugin designed to strip `data-test-id` (and `data-testid`) attributes from JSX elements during the build process, typically for production environments. It helps decouple testing concerns from production DOM, preventing test-specific attributes from bloating production bundles or being accessible in the client. The current stable version is v3.0.0, released recently with a focus on deeper object attribute removal. While there isn't a strict release cadence, the project shows active maintenance with regular updates for bug fixes, dependency security, and new feature enhancements like custom attribute stripping. Its primary differentiator is its focused approach on test-ID removal, offering configuration flexibility for custom attribute names and clear guidance on environment-specific application, preventing accidental stripping in test builds.

testing devops

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

github ↗package ↗

INSTALL

IMPORT

SIG · BABEL-PLUGIN-JSX-R

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

testingjavascriptv3.0.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Plugin reference in Babel config

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

✗ import plugin from 'babel-plugin-jsx-remove-data-test-id'

This package is a Babel plugin, not a JavaScript module for direct import. It is referenced as a string within your Babel configuration file's `plugins` array.

Plugin with options

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

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

To pass options, the plugin name must be wrapped in an array, with the options object as the second element. `attributes` can be a single string or an array of strings.

Environment-specific plugin application

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

It is crucial to apply this plugin only in non-test environments (e.g., `production`) to prevent your tests from failing due to missing `data-test-id` attributes. This is configured via Babel's `env` option.

This quickstart shows a `.babelrc` configuration that applies the plugin only in the `production` environment, stripping `data-test-id`, `data-testid`, and a custom attribute `my-custom-test-attr`. It also includes an example React component demonstrating how these attributes would be used in code and then removed.

{ "env": { "production": { "plugins": [ [ "babel-plugin-jsx-remove-data-test-id", { "attributes": ["data-test-id", "data-testid", "my-custom-test-attr"] } ] ] }, "development": { "plugins": [] }, "test": { "plugins": [] } } } // Example React component usage (e.g., in a .jsx or .tsx file) // In production builds, <p data-test-id="component-text"> will become <p> // In test/development builds, it will remain as is. import React from 'react'; function MyComponent({ someText }) { return ( <div> <p data-test-id="component-text" my-custom-test-attr="another-test-identifier"> {someText} </p> <button data-testid="submit-button">Submit</button> </div> ); } export default MyComponent;

Debug

Known issues

breakingVersion 2.0.0 introduced a breaking change by requiring Babel 7 as a peer dependency. Projects using Babel 6 must upgrade or use a previous plugin version.

fix

Upgrade `@babel/core` to version `^7.0.0`. If using Babel 6, consider installing `@babel/core@6.0.0-bridge.1` to silence peer dependency warnings, though full compatibility may vary. The recommended path is to upgrade to Babel 7.

affects: >=2.0.0

breakingVersion 3.0.0 enhances its stripping capabilities to remove test IDs from 'deep objects'. While this is an intended feature, it could be a breaking change if previous configurations or test setups implicitly relied on such attributes *not* being stripped in deep object structures.

fix

Review your test suites and component structures if you were using `data-test-id` attributes within deeply nested object properties. Ensure all test IDs intended for removal are now stripped, and adjust tests accordingly if they relied on their presence.

affects: >=3.0.0

gotchaApplying the plugin in test environments (e.g., during Jest/Cypress runs) will cause your tests to fail because the `data-test-id` attributes they rely on will be stripped from the DOM.

fix

Configure your Babel setup to apply `babel-plugin-jsx-remove-data-test-id` *only* in non-test environments (e.g., `production`). Utilize Babel's `env` configuration option to conditionally load the plugin.

affects: >=1.0.0

gotchaBy default, the plugin strips `data-test-id` and `data-testid` (for react-testing-library). If you use other custom attribute names for testing, they will not be removed unless explicitly configured.

fix

Provide a `attributes` option in your plugin configuration with a string or an array of strings listing all custom test attribute names you wish to strip. For example: `plugins: [['babel-plugin-jsx-remove-data-test-id', { attributes: ['data-test-id', 'selenium-id'] }]]`.

affects: >=1.0.0

Errors

Common errors & fixes

Unmet peer dependency '@babel/core@^7.0.0'

You are using Babel 6 or an older version of Babel 7, which does not satisfy the peer dependency requirement of the plugin.

fix

Upgrade your `@babel/core` package to version 7.x (e.g., `npm install @babel/core@^7.0.0`) or install `@babel/core@6.0.0-bridge.1` if you must remain on Babel 6, though an upgrade is recommended.

Error: unable to find element by [data-test-id="my-element"]

Your tests are failing because `data-test-id` attributes are being stripped from the DOM during the build process, likely because the plugin is active in your test environment.

fix

Modify your Babel configuration (`.babelrc` or `babel.config.js`) to ensure `babel-plugin-jsx-remove-data-test-id` is only applied in non-test environments, such as `production`. Use the `env` block in your Babel config to achieve this.

Upgrade

Version history

3.0.0latest on npm

Audit

Dependencies

@babel/corerequiredRequired peer dependency for Babel functionality. Version ^7.0.0 is expected for full compatibility.

Agent activity

65 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/coderas/babel-plugin-jsx-remove-data-test-id ↗

packagehttps://www.npmjs.com/package/babel-plugin-jsx-remove-data-test-id ↗