Registry / devops / babel-plugin-react-test-id

babel-plugin-react-test-id

library1.0.2jsnpmunverified

The `babel-plugin-react-test-id` package provides a Babel plugin designed to automatically remove specified props, such as `testID`, from React components during the build process. This is particularly useful for optimizing production bundles by eliminating test-specific attributes that are not needed in the final deployed application, thereby reducing bundle size and preventing the exposure of internal testing implementation details. The current stable version is 1.0.2. As a build-time utility, its release cadence is typically slow, with updates primarily driven by changes in Babel's API or feature requests for additional prop removal customization. It differentiates itself by offering a straightforward, declarative way to strip these attributes without manual refactoring or conditional rendering logic within components, ensuring a clean separation between testing instrumentation and production code.

devops

npm install babel-plugin-react-test-id

package ↗

INSTALL

IMPORT

SIG · BABEL-PLUGIN-REACT

babel-plugin-react-test-id

devopsjavascriptv1.0.2

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 name in config

✓ ["react-test-id"]

✗ import ReactTestId from 'babel-plugin-react-test-id'

Babel plugins are referenced by string name in configuration files like `.babelrc` or `babel.config.js`, not imported directly in application code.

plugin name with options

✓ ["react-test-id", {"props": ["data-testid", "testID"]}]

✗ ["react-test-id", {props: "data-testid"}]

Options are passed as an array after the plugin name. The `props` option expects an array of strings, not a single string.

programmatic require

✓ require('babel-plugin-react-test-id')

✗ import { plugin } from 'babel-plugin-react-test-id'

When loading plugins programmatically (e.g., in a `babel.config.js`), use `require()` to obtain the plugin module. It's not designed for direct ESM imports in user application code.

This quickstart demonstrates how to install `babel-plugin-react-test-id`, configure it in `.babelrc`, and use a `npm run build` script to process a React component file. The resulting output in `dist/App.js` will show that `testID` props have been successfully removed, illustrating its function in a typical development workflow.

```json // package.json { "name": "my-react-app", "version": "1.0.0", "devDependencies": { "@babel/cli": "^7.23.0", "@babel/core": "^7.23.0", "babel-plugin-react-test-id": "^1.0.0", "react": "^18.2.0" }, "scripts": { "build": "babel src --out-dir dist --delete-dir-on-start" } } ``` ```json // .babelrc { "plugins": ["react-test-id"] } ``` ```javascript // src/App.js import React from 'react'; function Button({ children, testID, ...props }) { return <button data-test-button testID={testID} {...props}>{children}</button>; } export default function App() { return ( <div> <h1 testID="main-heading">Welcome</h1> <Button testID="submit-button" onClick={() => alert('Submitted!')}>Submit</Button> <p testID="info-paragraph">This is some information.</p> </div> ); } ``` ```bash # Install development dependencies npm install # Run the Babel build process npm run build # Output in dist/App.js (simplified for brevity, actual output will be transpiled JS) # // dist/App.js # import React from 'react'; # function Button({ children, ...props }) { # return <button data-test-button {...props}>{children}</button>; # } # export default function App() { # return ( # <div> # <h1>Welcome</h1> # <Button onClick={() => alert('Submitted!')}>Submit</Button> # <p>This is some information.</p> # </div> # ); # } ```

Debug

Known issues

gotchaThe plugin must be correctly configured in your Babel setup to run during the build process for the desired environments (e.g., production). If not, `testID` props might still appear in your final bundles.

fix

Ensure `babel-plugin-react-test-id` is included in your `.babelrc`, `babel.config.js`, or Babel CLI arguments, and that your build scripts invoke Babel correctly for the target environment.

affects: >=1.0.0

gotchaWhen using the `props` option to specify custom attribute names for removal, ensure the names in the array exactly match the attributes used in your components. Mismatched casing or incorrect names will prevent removal.

fix

Double-check the `props` array in your Babel configuration (e.g., `['data-test-id', 'customTestId']`) against your component code.

affects: >=1.0.0

Errors

Common errors & fixes

Error: Plugin 'react-test-id' not found.

The `babel-plugin-react-test-id` package is either not installed or not discoverable by Babel.

fix

Run `npm install --save-dev babel-plugin-react-test-id` or `yarn add --dev babel-plugin-react-test-id`. If in a monorepo or with custom paths, ensure the plugin can be resolved (e.g., use `require.resolve('babel-plugin-react-test-id')` in `babel.config.js`).

Upgrade

Version history

1.0.2latest on npm

Audit

Dependencies

@babel/corerequiredRequired as the core Babel engine to execute the plugin.

@babel/clioptionalCommonly used for command-line execution of Babel transforms.

Agent activity

6 hits · last 30 days

node

Resources

packagehttps://www.npmjs.com/package/babel-plugin-react-test-id ↗