{"id":12865,"library":"babel-plugin-jsx-remove-data-test-id","title":"Babel Plugin to Remove JSX data-test-id Attributes","description":"This package, `babel-plugin-jsx-remove-data-test-id`, provides a Babel plugin designed to strip `data-test-id` (and `data-testid`) attributes from JSX elements during the build process, typically for production environments. It helps decouple testing concerns from production DOM, preventing test-specific attributes from bloating production bundles or being accessible in the client. The current stable version is v3.0.0, released recently with a focus on deeper object attribute removal. While there isn't a strict release cadence, the project shows active maintenance with regular updates for bug fixes, dependency security, and new feature enhancements like custom attribute stripping. Its primary differentiator is its focused approach on test-ID removal, offering configuration flexibility for custom attribute names and clear guidance on environment-specific application, preventing accidental stripping in test builds.","status":"active","version":"3.0.0","language":"javascript","source_language":"en","source_url":"git://github.com/coderas/babel-plugin-jsx-remove-data-test-id","tags":["javascript","babel","plugin","tdd","tests","specs","qa","strip","className"],"install":[{"cmd":"npm install babel-plugin-jsx-remove-data-test-id","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-jsx-remove-data-test-id","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-jsx-remove-data-test-id","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for Babel functionality. Version ^7.0.0 is expected for full compatibility.","package":"@babel/core","optional":false}],"imports":[{"note":"This package is a Babel plugin, not a JavaScript module for direct import. It is referenced as a string within your Babel configuration file's `plugins` array.","wrong":"import plugin from 'babel-plugin-jsx-remove-data-test-id'","symbol":"Plugin reference in Babel config","correct":"plugins: [\"babel-plugin-jsx-remove-data-test-id\"]"},{"note":"To pass options, the plugin name must be wrapped in an array, with the options object as the second element. `attributes` can be a single string or an array of strings.","wrong":"plugins: [\"babel-plugin-jsx-remove-data-test-id\", { attributes: \"selenium-id\" }]","symbol":"Plugin with options","correct":"plugins: [\n  [\"babel-plugin-jsx-remove-data-test-id\", {\n    attributes: [\"data-test-id\", \"selenium-id\"]\n  }]\n]"},{"note":"It is crucial to apply this plugin only in non-test environments (e.g., `production`) to prevent your tests from failing due to missing `data-test-id` attributes. This is configured via Babel's `env` option.","symbol":"Environment-specific plugin application","correct":"env: {\n  production: {\n    plugins: [\"babel-plugin-jsx-remove-data-test-id\"]\n  },\n  test: {\n    plugins: [\"other-plugins\"]\n  }\n}"}],"quickstart":{"code":"{\n  \"env\": {\n    \"production\": {\n      \"plugins\": [\n        [\n          \"babel-plugin-jsx-remove-data-test-id\",\n          {\n            \"attributes\": [\"data-test-id\", \"data-testid\", \"my-custom-test-attr\"]\n          }\n        ]\n      ]\n    },\n    \"development\": {\n      \"plugins\": []\n    },\n    \"test\": {\n      \"plugins\": []\n    }\n  }\n}\n\n// Example React component usage (e.g., in a .jsx or .tsx file)\n// In production builds, <p data-test-id=\"component-text\"> will become <p>\n// In test/development builds, it will remain as is.\n\nimport React from 'react';\n\nfunction MyComponent({ someText }) {\n  return (\n    <div>\n      <p data-test-id=\"component-text\" my-custom-test-attr=\"another-test-identifier\">\n        {someText}\n      </p>\n      <button data-testid=\"submit-button\">Submit</button>\n    </div>\n  );\n}\n\nexport default MyComponent;","lang":"javascript","description":"This quickstart shows a `.babelrc` configuration that applies the plugin only in the `production` environment, stripping `data-test-id`, `data-testid`, and a custom attribute `my-custom-test-attr`. It also includes an example React component demonstrating how these attributes would be used in code and then removed."},"warnings":[{"fix":"Upgrade `@babel/core` to version `^7.0.0`. If using Babel 6, consider installing `@babel/core@6.0.0-bridge.1` to silence peer dependency warnings, though full compatibility may vary. The recommended path is to upgrade to Babel 7.","message":"Version 2.0.0 introduced a breaking change by requiring Babel 7 as a peer dependency. Projects using Babel 6 must upgrade or use a previous plugin version.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Review your test suites and component structures if you were using `data-test-id` attributes within deeply nested object properties. Ensure all test IDs intended for removal are now stripped, and adjust tests accordingly if they relied on their presence.","message":"Version 3.0.0 enhances its stripping capabilities to remove test IDs from 'deep objects'. While this is an intended feature, it could be a breaking change if previous configurations or test setups implicitly relied on such attributes *not* being stripped in deep object structures.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Configure your Babel setup to apply `babel-plugin-jsx-remove-data-test-id` *only* in non-test environments (e.g., `production`). Utilize Babel's `env` configuration option to conditionally load the plugin.","message":"Applying the plugin in test environments (e.g., during Jest/Cypress runs) will cause your tests to fail because the `data-test-id` attributes they rely on will be stripped from the DOM.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Provide a `attributes` option in your plugin configuration with a string or an array of strings listing all custom test attribute names you wish to strip. For example: `plugins: [['babel-plugin-jsx-remove-data-test-id', { attributes: ['data-test-id', 'selenium-id'] }]]`.","message":"By default, the plugin strips `data-test-id` and `data-testid` (for react-testing-library). If you use other custom attribute names for testing, they will not be removed unless explicitly configured.","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":"Upgrade your `@babel/core` package to version 7.x (e.g., `npm install @babel/core@^7.0.0`) or install `@babel/core@6.0.0-bridge.1` if you must remain on Babel 6, though an upgrade is recommended.","cause":"You are using Babel 6 or an older version of Babel 7, which does not satisfy the peer dependency requirement of the plugin.","error":"Unmet peer dependency '@babel/core@^7.0.0'"},{"fix":"Modify your Babel configuration (`.babelrc` or `babel.config.js`) to ensure `babel-plugin-jsx-remove-data-test-id` is only applied in non-test environments, such as `production`. Use the `env` block in your Babel config to achieve this.","cause":"Your tests are failing because `data-test-id` attributes are being stripped from the DOM during the build process, likely because the plugin is active in your test environment.","error":"Error: unable to find element by [data-test-id=\"my-element\"]"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null}