Registry / testing / babel-plugin-react-data-testid

babel-plugin-react-data-testid

library0.2.0jsnpmunverified

Babel plugin that automatically adds data-testid attributes to JSX elements based on the component name. Current version 0.2.0, stable maintenance mode. Supports custom attribute names and multiple attributes via options. Does not support class components. Compared to alternatives like babel-plugin-jsx-remove-data-test-id, this plugin focuses on adding rather than stripping test IDs.

testing

npm install babel-plugin-react-data-testid

github ↗package ↗

INSTALL

IMPORT

SIG · BABEL-PLUGIN-REACT

babel-plugin-react-data-testid

testingjavascriptv0.2.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.

babel-plugin-react-data-testid

✓ Add 'babel-plugin-react-data-testid' to plugins in Babel config (e.g., .babelrc or babel.config.js)

✗ Importing as a JavaScript module (e.g., import plugin from 'babel-plugin-react-data-testid') — it's a Babel plugin, not a runtime module

Use in Babel configuration, not in application code.

Shows installation, Babel config setup, and expected transformation of JSX component names to data-testid attributes.

// Install: npm install --save-dev babel-plugin-react-data-testid // babel.config.js module.exports = { presets: ['@babel/preset-env', '@babel/preset-react'], plugins: ['babel-plugin-react-data-testid'] }; // Before: function App() { return <div>Hello</div>; } const Header = () => <header>Title</header>; // After: // <div data-testid="App">Hello</div> // <header data-testid="Header">Title</header>

Debug

Known issues

gotchaClass components are not supported; data-testid will not be added to class components.

fix

Refactor class components to functional components or manually add data-testid.

affects: >=0.1.0

Errors

Common errors & fixes

Error: data-testid not added to component

Plugin only works with functional components, not class components.

fix

Ensure your component is a function, not a class. Convert class component to function if needed.

Upgrade

Version history

0.2.0latest on npm

Audit

Dependencies

babeloptionalUnclear peer dependency; Babel 7+ required

Agent activity

18 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/akameco/babel-plugin-react-data-testid ↗

packagehttps://www.npmjs.com/package/babel-plugin-react-data-testid ↗