Registry / testing / babel-plugin-jsx-auto-test-id

babel-plugin-jsx-auto-test-id

library1.1.0jsnpmunverified

This Babel plugin (`babel-plugin-jsx-auto-test-id`) automatically injects `data-test` attributes into the root HTML elements generated by JSX components. It infers the `data-test` ID from the component's display name, providing a consistent and maintenance-free solution for E2E test selectors. The current stable version is 1.1.0. While a formal release cadence isn't published, the 1.x versioning indicates stability and ongoing support. Its key differentiator is simplifying test automation setup by eliminating the need for manual `data-test` attribute management, which is crucial for reducing flaky tests and developer overhead in projects using frameworks like React with testing tools like Cypress or Playwright.

testing web-framework

npm install babel-plugin-jsx-auto-test-id

github ↗package ↗

INSTALL

IMPORT

SIG · BABEL-PLUGIN-JSX-A

babel-plugin-jsx-auto-test-id

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.

jsx-auto-test-id

✓ { "plugins": ["jsx-auto-test-id"] }

✗ import jsxAutoTestId from 'babel-plugin-jsx-auto-test-id';

Babel plugins are configured in `.babelrc`, `babel.config.js`, or `package.json`'s `babel` field. The plugin's string identifier, `"jsx-auto-test-id"`, is placed in the `plugins` array. It is not directly imported or consumed in JavaScript application code.

Config with Options

✓ { "plugins": [ ["jsx-auto-test-id", { "attributeName": "data-my-custom-test-id" }] ] }

✗ { "plugins": [ "jsx-auto-test-id", { "attributeName": "data-my-custom-test-id" } ] }

When providing options to a Babel plugin, the plugin name and its options object must be wrapped together in a nested array within the `plugins` configuration.

This quickstart demonstrates how to configure `babel-plugin-jsx-auto-test-id` in a typical React project using Babel to automatically inject custom `data-test` attributes into component host elements during compilation. It includes setup for `package.json`, `.babelrc`, and an example JSX input and the necessary CLI command to perform the transformation.

{ "// package.json excerpt": "Install dev dependencies", "devDependencies": { "@babel/cli": "^7.0.0", "@babel/core": "^7.0.0", "@babel/preset-react": "^7.0.0", "babel-plugin-jsx-auto-test-id": "^1.1.0" }, "scripts": { "build": "babel src --out-dir dist" } } // .babelrc or babel.config.js { "presets": [ "@babel/preset-react" // Required for JSX transformation ], "plugins": [ "jsx-auto-test-id", { "attributeName": "data-custom-test-id" } // Optional: customize the attribute name ] } // src/App.jsx (input) import React from 'react'; function Header() { return <h1>Welcome to the App</h1>; } function UserProfile({ name }) { return ( <div> <p>User: {name}</p> <button>Edit Profile</button> </div> ); } function App() { return ( <div className="main-container"> <Header /> <UserProfile name="John Doe" /> </div> ); } export default App; /* To run this quickstart: 1. Initialize a new Node.js project: `npm init -y` 2. Install dependencies: `npm install --save-dev @babel/cli @babel/core @babel/preset-react babel-plugin-jsx-auto-test-id` 3. Create the `.babelrc` (or `babel.config.js`) file with the above configuration. 4. Create the `src` directory and `src/App.jsx` file as shown. 5. Run the Babel build command: `npm run build` 6. Inspect `dist/App.js` to see the automatically added `data-custom-test-id` attributes. */

Debug

Known issues

gotchaThis plugin primarily targets functional components and class components. It may not apply `data-test` IDs to generic HTML elements (like `<div>`, `<span>`) that are not the root of a named component, or to JSX fragments. Ensure your components are properly named functions or classes for the IDs to be inferred.

fix

Structure your JSX to have meaningful, named component wrappers where you expect `data-test` IDs. For elements within components that also need IDs, consider manual application or a different strategy.

affects: >=1.0.0

gotchaIf you are already manually adding `data-test` or similar attributes, this plugin's automatic injection might conflict or create redundant attributes. The plugin will attempt to add its own attribute, potentially overriding or duplicating existing ones if the attribute name is the same.

fix

Decide on a single strategy for `data-test` attributes: either fully automate with this plugin, or manage them manually. If using this plugin, remove any existing manual `data-test` attributes to prevent conflicts. Use the `attributeName` option if you need a different attribute name.

affects: >=1.0.0

gotchaThe plugin infers the `data-test` ID from the component's name. Obfuscation or minification of component names during a build process (e.g., in a production build) might lead to unintuitive or unstable `data-test` IDs, defeating their purpose for E2E tests.

fix

Ensure that your build configuration for production environments preserves component names, especially if you rely on this plugin for stable E2E selectors. Consult your minifier's documentation (e.g., Terser's `keep_fnames` option) or disable this plugin for production builds and use a different testing strategy if name obfuscation is critical.

affects: >=1.0.0

Errors

Common errors & fixes

Error: Cannot find module 'babel-plugin-jsx-auto-test-id'

The plugin package has not been installed or is incorrectly referenced.

fix

Install the package as a development dependency: `npm install --save-dev babel-plugin-jsx-auto-test-id` or `yarn add -D babel-plugin-jsx-auto-test-id`.

SyntaxError: Unexpected token '<' (from Babel when processing JSX)

Babel is encountering JSX syntax but does not have a preset configured to parse it, typically `@babel/preset-react`.

fix

Ensure `@babel/preset-react` (or an equivalent JSX preset like `@babel/preset-typescript` if using TSX) is installed and correctly listed in your Babel configuration's `presets` array.

Plugin 'jsx-auto-test-id' is not transforming my code / no data-test attributes are added.

The plugin is either not enabled in the Babel configuration, or the configuration file is not being picked up by Babel, or the input JSX doesn't match the plugin's transformation criteria.

fix

Verify that `"jsx-auto-test-id"` is present in the `plugins` array of your `.babelrc` or `babel.config.js`. Ensure Babel is running with the correct configuration path. Check that the JSX elements are indeed component roots (e.g., `function MyComponent() { return <div>...</div>; }` not just `<div>` in global scope).

Upgrade

Version history

1.1.0latest on npm

Audit

Dependencies

@babel/corerequiredRequired as a peer dependency for all Babel plugins to function within the Babel ecosystem.

Agent activity

24 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/michellocana/babel-plugin-jsx-auto-test-id ↗

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