创建 React App 2 - 删除 html 属性以进行测试

Question

是否可以使用此插件连接 Create React App 2：https : //www.npmjs.com/package/babel-plugin-jsx-remove-data-test-id而不弹出？我已经创建了.bablerc文件，但它不起作用。我想使用自定义属性进行 bdd 测试并在生产中删除此属性。

另外，我不想创建 HOC 来应用属性 - 我有很多组件并且包装每个组件非常困难。

Answer 1

您可以使用react-app-rewired https://www.npmjs.com/package/react-app-rewired并通过 config-override.js 文件覆盖配置：

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

module.exports = override(
  ...addBabelPresets([
    '@babel/preset-env',
    {
      modules: false,
      useBuiltIns: false,
      debug: false,
    },
  ]),
  ...addBabelPlugins(
    'babel-plugin-styled-components',
    'babel-plugin-jsx-remove-data-test-id',
  ),
);