Registry / testing / babel-plugin-remove-test-ids

babel-plugin-remove-test-ids

library1.1.0jsnpmunverified

This Babel plugin automatically strips specified `data-*` attributes (by default, `data-test-id`) from JSX elements during the build process. Its primary motivation is to clean up the production DOM by removing attributes primarily used for end-to-end testing, potentially reducing bundle size and preventing these attributes from appearing in user-facing code. Developed around a pattern suggested at React Alicante in 2017, the package is currently at version 1.1.0 and was last updated over 8 years ago. Given its lack of recent activity and minimal version changes, it is considered stable but largely unmaintained. Key differentiators include its simplicity and direct integration into the Babel pipeline, providing a compile-time solution for attribute removal without runtime overhead.

testing devops

npm install babel-plugin-remove-test-ids

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · BABEL-PLUGIN-REMOV

babel-plugin-remove-test-ids

testingjavascriptv1.1.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.

Configuring in .babelrc

✓ { "plugins": [ "remove-test-ids" ] }

✗ import removeTestIds from 'babel-plugin-remove-test-ids'

Babel plugins are configured via string names in Babel configuration files, not directly imported as JavaScript modules in application code.

Configuring with options

✓ { "plugins": [ ["remove-test-ids", { "attributes": ["data-test", "data-custom-test-attr"] }] ] }

Custom attributes to be removed can be specified by passing an options object as the second element of the plugin array in your Babel configuration.

Configuring in babel.config.js

✓ module.exports = { plugins: [ require.resolve('babel-plugin-remove-test-ids') ] };

✗ plugins: ['remove-test-ids']

For `babel.config.js` or `babel.config.cjs`, using `require.resolve` ensures the plugin path is correctly determined, especially in monorepos or complex project structures.

This configuration shows how to integrate `babel-plugin-remove-test-ids` into your Babel setup to automatically strip test-related attributes from JSX during compilation.

// .babelrc or babel.config.json { "presets": [ "@babel/preset-react" // Ensure React/JSX is processed ], "plugins": [ // This plugin removes 'data-test-id' and 'data-testid' by default "remove-test-ids", // Example of configuring custom attributes to remove // ["remove-test-ids", { "attributes": ["data-qa-id", "data-automation-id"] }] ] } // Example JSX code that would be transformed: // function MyComponent() { // return ( // <div data-test-id="my-component" data-qa-id="qa-element"> // Hello World // </div> // ); // } // // After Babel processing with this plugin, the attributes would be removed: // function MyComponent() { // return ( // <div> // Hello World // </div> // ); // }

Debug

Known issues

breakingThis plugin has not been updated in over 8 years and may not be fully compatible with modern Babel 7+ configurations, particularly with `@babel/core` and newer `preset-env` settings. It might require specific Babel bridge packages or older Babel versions to function correctly, leading to potential dependency conflicts.

fix

Consider migrating to actively maintained alternatives like `babel-plugin-jsx-remove-data-test-id` or `@svgr/babel-plugin-remove-jsx-attribute` for better Babel 7+ compatibility and ongoing support.

affects: <=1.1.0

gotchaThe plugin's effectiveness relies on proper ordering within your Babel configuration. It must run early in the plugin pipeline, after syntax parsing but before other plugins that might modify or remove the JSX elements themselves, to ensure the target attributes are still present when the plugin executes.

fix

Ensure `"remove-test-ids"` is placed before any other plugins that could transform or remove JSX attributes or elements in your Babel configuration. For environment-specific removal, configure the plugin only for production builds using Babel's `env` option.

affects: *

gotchaThis plugin only targets attributes present directly in JSX. If your build pipeline involves transformations that alter JSX structure significantly before this plugin runs (e.g., custom JSX factories, advanced preprocessors, or non-standard React runtimes), the attributes might not be found and removed as expected.

fix

Verify that the plugin is running at a stage where the JSX attributes are still in their original form. If using complex transformations, you might need to test the output or consider a custom Babel plugin tailored to your specific AST structure.

affects: *

Errors

Common errors & fixes

Error: Cannot find plugin "remove-test-ids" relative to file ...

Babel cannot locate the installed plugin, often due to incorrect installation, an issue with Babel's resolution path, or a complex project structure like a monorepo.

fix

First, ensure the plugin is installed: `npm install babel-plugin-remove-test-ids --save-dev`. If using `babel.config.js`, specify the full path using `require.resolve('babel-plugin-remove-test-ids')`.

TypeError: options is not iterable

This error can occur if plugin options are passed in an incorrect format or if there's a compatibility issue with how an older plugin expects options in a newer Babel environment.

fix

Ensure the plugin options are passed as a JSON object within an array, following the pattern `["plugin-name", { "optionKey": "value" }]`. Double-check the plugin's documentation for its expected options structure.

`data-test-id` attributes are still present in my production build.

The plugin might not be correctly configured to run in the production environment, or another transformation is interfering, or the plugin itself isn't active.

fix

Verify that your Babel configuration correctly applies the `remove-test-ids` plugin specifically to your production build (e.g., using Babel's `env.production` configuration). Ensure there are no conflicting plugins or transforms. Confirm that the attributes you want to remove are correctly listed in the plugin's `attributes` option if you are using custom names.

Upgrade

Version history

1.1.0latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

18 hits · last 30 days

node

OpenAI (training)

Resources

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

packagehttps://www.npmjs.com/package/babel-plugin-remove-test-ids ↗

homepagehttps://documentup.com/kutyel/babel-plugin-remove-test-ids ↗