使用WebdriverIO获取React应用单文件覆盖率仅得到打包文件如何解决

• 第一步：新增依赖
  安装3个必要开发依赖，无需eject react-scripts默认配置即可注入覆盖率插桩：

  npm i babel-plugin-istanbul react-app-rewired customize-cra --save-dev
  

• 第二步：修改React应用启动配置
  1. 替换package.json中的启动脚本，将原有react-scripts start修改为以下内容，开启source map生成与测试环境插桩：

     NODE_ENV=test GENERATE_SOURCEMAP=true react-app-rewired start
     

  2. 项目根目录新建config-overrides.js文件，写入以下配置：

     const { override, addBabelPlugin } = require('customize-cra');
     
     module.exports = override(
       // 仅在测试环境注入istanbul覆盖率插桩，不影响正常开发/生产构建
       addBabelPlugin(['istanbul', { exclude: ['**/*.test.js', '**/node_modules/**'] }])
     );
     

• 第三步：调整wdio.conf.js的devtools服务配置
  补充source map解析、路径映射、第三方包排除规则：

  services: [
      'chromedriver',
      [
          'devtools', {
              coverageReporter: {
                  enable: true,
                  type: 'cobertura',
                  logDir: './coverage',
                  // 开启source map解析，将打包文件映射回原源码
                  includeRawSourceMap: true,
                  // 排除第三方依赖、webpack runtime等非业务代码
                  exclude: [/vendors~.*\.chunk\.js/, /webpack\/runtime/, /node_modules/],
                  // 路径重写，将浏览器加载的打包资源路径映射到本地源码路径
                  rewritePath: (filePath) => {
                      if (filePath.includes('static/js/')) {
                          return filePath.replace(/^.*static\/js\//, `${process.cwd()}/src/`);
                      }
                      return filePath;
                  }
              }
          }
      ]
  ]
  

• 第四步：执行验证
  先启动React应用，再运行wdio测试用例，执行完成后coverage目录会生成对应src目录结构的单文件覆盖率数据。

• 不要使用生产环境构建的应用跑覆盖率测试，生产环境的代码压缩、tree shaking会导致source map映射偏移，无法正确对应到原文件。
• 若无需统计测试用例文件、工具类配置文件，可直接在babel-plugin-istanbul的exclude规则中补充对应路径即可。

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