Babel Plugin: Strip data-testid A Babel plugin that automatically removes data-testid attributes from your JSX, helping you write robust tests without bloating your production code.

The Problem A best practice for writing reliable integration and end-to-end tests is to use data-testid attributes to select elements, as they are decoupled from your styles and implementation details. However, these attributes are completely unnecessary in your final production build and add extra weight to your HTML.

The Solution This Babel plugin automatically finds and removes any JSX attribute named data-testid during your build process. This lets you use test IDs freely in your development code while keeping your production output lean and clean.

Your code (before):

Log In

What Babel outputs (after applying this plugin):

Log In

Installation npm install --save-dev @your-username/babel-plugin-strip-data-testid

Usage In your Babel configuration file (babel.config.js or .babelrc), add the plugin to your plugins array. It is highly recommended to only apply this plugin for your production builds.

// babel.config.js module.exports = api => { // Use api.env() to check the current environment const isProduction = api.env('production');

return { presets: [ // ... your other presets, like '@babel/preset-react' ], plugins: [ // Only apply the plugin in the production environment isProduction && '@your-username/babel-plugin-strip-data-testid', // ... your other plugins ].filter(Boolean), // .filter(Boolean) removes any falsey values from the array }; };