{"id":12864,"library":"babel-plugin-jsx-auto-test-id","title":"Babel Plugin: Automatic JSX Test IDs","description":"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.","status":"active","version":"1.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/michellocana/babel-plugin-jsx-auto-test-id","tags":["javascript","babel","data-test","automation","e2e tests"],"install":[{"cmd":"npm install babel-plugin-jsx-auto-test-id","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-jsx-auto-test-id","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-jsx-auto-test-id","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required as a peer dependency for all Babel plugins to function within the Babel ecosystem.","package":"@babel/core","optional":false}],"imports":[{"note":"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.","wrong":"import jsxAutoTestId from 'babel-plugin-jsx-auto-test-id';","symbol":"jsx-auto-test-id","correct":"{\n  \"plugins\": [\"jsx-auto-test-id\"]\n}"},{"note":"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.","wrong":"{\n  \"plugins\": [\n    \"jsx-auto-test-id\", { \"attributeName\": \"data-my-custom-test-id\" }\n  ]\n}","symbol":"Config with Options","correct":"{\n  \"plugins\": [\n    [\"jsx-auto-test-id\", { \"attributeName\": \"data-my-custom-test-id\" }]\n  ]\n}"}],"quickstart":{"code":"{\n  \"// package.json excerpt\": \"Install dev dependencies\",\n  \"devDependencies\": {\n    \"@babel/cli\": \"^7.0.0\",\n    \"@babel/core\": \"^7.0.0\",\n    \"@babel/preset-react\": \"^7.0.0\",\n    \"babel-plugin-jsx-auto-test-id\": \"^1.1.0\"\n  },\n  \"scripts\": {\n    \"build\": \"babel src --out-dir dist\"\n  }\n}\n\n// .babelrc or babel.config.js\n{\n  \"presets\": [\n    \"@babel/preset-react\" // Required for JSX transformation\n  ],\n  \"plugins\": [\n    \"jsx-auto-test-id\",\n    { \"attributeName\": \"data-custom-test-id\" } // Optional: customize the attribute name\n  ]\n}\n\n// src/App.jsx (input)\nimport React from 'react';\n\nfunction Header() {\n  return <h1>Welcome to the App</h1>;\n}\n\nfunction UserProfile({ name }) {\n  return (\n    <div>\n      <p>User: {name}</p>\n      <button>Edit Profile</button>\n    </div>\n  );\n}\n\nfunction App() {\n  return (\n    <div className=\"main-container\">\n      <Header />\n      <UserProfile name=\"John Doe\" />\n    </div>\n  );\n}\n\nexport default App;\n\n/*\nTo run this quickstart:\n1. Initialize a new Node.js project: `npm init -y`\n2. Install dependencies: `npm install --save-dev @babel/cli @babel/core @babel/preset-react babel-plugin-jsx-auto-test-id`\n3. Create the `.babelrc` (or `babel.config.js`) file with the above configuration.\n4. Create the `src` directory and `src/App.jsx` file as shown.\n5. Run the Babel build command: `npm run build`\n6. Inspect `dist/App.js` to see the automatically added `data-custom-test-id` attributes.\n*/","lang":"javascript","description":"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."},"warnings":[{"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.","message":"This 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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"If 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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"The 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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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`.","cause":"The plugin package has not been installed or is incorrectly referenced.","error":"Error: Cannot find module 'babel-plugin-jsx-auto-test-id'"},{"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.","cause":"Babel is encountering JSX syntax but does not have a preset configured to parse it, typically `@babel/preset-react`.","error":"SyntaxError: Unexpected token '<' (from Babel when processing JSX)"},{"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).","cause":"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.","error":"Plugin 'jsx-auto-test-id' is not transforming my code / no data-test attributes are added."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null}