{"id":19130,"library":"babel-plugin-react-data-testid","title":"babel-plugin-react-data-testid","description":"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.","status":"maintenance","version":"0.2.0","language":"javascript","source_language":"en","source_url":"https://github.com/akameco/babel-plugin-react-data-testid","tags":["javascript","babel","babel plugin","react","data-test","data-testid","typescript"],"install":[{"cmd":"npm install babel-plugin-react-data-testid","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-react-data-testid","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-react-data-testid","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Unclear peer dependency; Babel 7+ required","package":"babel","optional":true}],"imports":[{"note":"Use in Babel configuration, not in application code.","wrong":"Importing as a JavaScript module (e.g., import plugin from 'babel-plugin-react-data-testid') — it's a Babel plugin, not a runtime module","symbol":"babel-plugin-react-data-testid","correct":"Add 'babel-plugin-react-data-testid' to plugins in Babel config (e.g., .babelrc or babel.config.js)"}],"quickstart":{"code":"// Install: npm install --save-dev babel-plugin-react-data-testid\n// babel.config.js\nmodule.exports = {\n  presets: ['@babel/preset-env', '@babel/preset-react'],\n  plugins: ['babel-plugin-react-data-testid']\n};\n// Before:\nfunction App() { return <div>Hello</div>; }\nconst Header = () => <header>Title</header>;\n// After:\n// <div data-testid=\"App\">Hello</div>\n// <header data-testid=\"Header\">Title</header>","lang":"javascript","description":"Shows installation, Babel config setup, and expected transformation of JSX component names to data-testid attributes."},"warnings":[{"fix":"Refactor class components to functional components or manually add data-testid.","message":"Class components are not supported; data-testid will not be added to class components.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Ensure your component is a function, not a class. Convert class component to function if needed.","cause":"Plugin only works with functional components, not class components.","error":"Error: data-testid not added to component"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}