{"id":15300,"library":"babel-plugin-react-test-id","title":"Babel Plugin for Removing React Test ID Props","description":"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.","status":"active","version":"1.0.2","language":"javascript","source_language":"en","source_url":null,"tags":["javascript"],"install":[{"cmd":"npm install babel-plugin-react-test-id","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-react-test-id","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-react-test-id","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required as the core Babel engine to execute the plugin.","package":"@babel/core","optional":false},{"reason":"Commonly used for command-line execution of Babel transforms.","package":"@babel/cli","optional":true}],"imports":[{"note":"Babel plugins are referenced by string name in configuration files like `.babelrc` or `babel.config.js`, not imported directly in application code.","wrong":"import ReactTestId from 'babel-plugin-react-test-id'","symbol":"plugin name in config","correct":"[\"react-test-id\"]"},{"note":"Options are passed as an array after the plugin name. The `props` option expects an array of strings, not a single string.","wrong":"[\"react-test-id\", {props: \"data-testid\"}]","symbol":"plugin name with options","correct":"[\"react-test-id\", {\"props\": [\"data-testid\", \"testID\"]}]"},{"note":"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.","wrong":"import { plugin } from 'babel-plugin-react-test-id'","symbol":"programmatic require","correct":"require('babel-plugin-react-test-id')"}],"quickstart":{"code":"```json\n// package.json\n{\n  \"name\": \"my-react-app\",\n  \"version\": \"1.0.0\",\n  \"devDependencies\": {\n    \"@babel/cli\": \"^7.23.0\",\n    \"@babel/core\": \"^7.23.0\",\n    \"babel-plugin-react-test-id\": \"^1.0.0\",\n    \"react\": \"^18.2.0\"\n  },\n  \"scripts\": {\n    \"build\": \"babel src --out-dir dist --delete-dir-on-start\"\n  }\n}\n```\n\n```json\n// .babelrc\n{\n  \"plugins\": [\"react-test-id\"]\n}\n```\n\n```javascript\n// src/App.js\nimport React from 'react';\n\nfunction Button({ children, testID, ...props }) {\n  return <button data-test-button testID={testID} {...props}>{children}</button>;\n}\n\nexport default function App() {\n  return (\n    <div>\n      <h1 testID=\"main-heading\">Welcome</h1>\n      <Button testID=\"submit-button\" onClick={() => alert('Submitted!')}>Submit</Button>\n      <p testID=\"info-paragraph\">This is some information.</p>\n    </div>\n  );\n}\n```\n\n```bash\n# Install development dependencies\nnpm install\n\n# Run the Babel build process\nnpm run build\n\n# Output in dist/App.js (simplified for brevity, actual output will be transpiled JS)\n# // dist/App.js\n# import React from 'react';\n# function Button({ children, ...props }) {\n#   return <button data-test-button {...props}>{children}</button>;\n# }\n# export default function App() {\n#   return (\n#     <div>\n#       <h1>Welcome</h1>\n#       <Button onClick={() => alert('Submitted!')}>Submit</Button>\n#       <p>This is some information.</p>\n#     </div>\n#   );\n# }\n```","lang":"javascript","description":"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."},"warnings":[{"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.","message":"The 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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Double-check the `props` array in your Babel configuration (e.g., `['data-test-id', 'customTestId']`) against your component code.","message":"When 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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"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`).","cause":"The `babel-plugin-react-test-id` package is either not installed or not discoverable by Babel.","error":"Error: Plugin 'react-test-id' not found."}],"ecosystem":"npm"}