如何在React CRA生产构建中移除data-testid（适配TSX文件）

最优方案：使用Babel插件在构建阶段全局移除 #

不需要修改任何组件代码，直接通过Babel插件在生产构建时自动剔除data-testid属性，既不影响开发阶段的测试，也能确保生产产物干净。

步骤1：安装依赖

安装专门用于移除React属性的Babel插件：

npm install babel-plugin-react-remove-properties --save-dev
# 或使用yarn
yarn add babel-plugin-react-remove-properties -D

步骤2：修改react-app-rewired配置

在项目根目录的config-overrides.js中添加Babel插件配置，仅在生产环境启用：

const { override, addBabelPlugin } = require('customize-cra');

module.exports = override(
  process.env.NODE_ENV === 'production'
    ? addBabelPlugin([
        'react-remove-properties',
        { properties: ['data-testid'] } // 指定要移除的属性
      ])
    : undefined
);

可选：通过.babelrc配置（更灵活）

如果需要更细粒度的环境配置，可以创建.babelrc文件：

{
  "env": {
    "production": {
      "plugins": [
        ["react-remove-properties", { "properties": ["data-testid"] }]
      ]
    }
  }
}

然后修改config-overrides.js让react-app-rewired读取自定义Babel配置：

const { override, useBabelRc } = require('customize-cra');

module.exports = override(
  useBabelRc()
);

验证效果

执行生产构建命令：

npm run build

打开build目录下的静态文件（如index.html或打包后的JS文件），搜索data-testid，确认该属性已被完全移除。

方案优势 #

• 无侵入性：不需要修改任何组件的TSX代码，避免重复逻辑
• 环境隔离：仅在生产构建生效，开发阶段保留data-testid方便E2E/单元测试
• 高效可靠：在Babel编译阶段处理，性能优于运行时移除逻辑

内容的提问来源于stack exchange，提问作者Misha Kuklin