Angular+TypeScript项目配置Cypress代码覆盖遇插桩问题求助

针对你遇到的Did you forget to instrument your code?提示，以下是具体的排查和修复方向：

1. 补全Cypress支持文件的代码覆盖引入 #

在cypress/support/e2e.ts中添加以下代码，这是收集覆盖数据的必要步骤：

import '@cypress/code-coverage/support'

2. 替换过时的插桩loader（针对Angular 12+） #

istanbul-instrumenter-loader已不再维护，对于Angular 12及以上版本，建议替换为@jsdevtools/coverage-istanbul-loader：

• 安装依赖：

  npm install --save-dev @jsdevtools/coverage-istanbul-loader
  

• 修改coverage.webpack.ts中的loader配置：

  import * as path from 'path';
  
  export default {
    module: {
      rules: [
        {
          test: /\.(js|ts)$/,
          loader: '@jsdevtools/coverage-istanbul-loader',
          options: { esModules: true },
          enforce: 'post',
          include: path.join(__dirname, '..', 'src'),
          exclude: [
            /\.(e2e|spec)\.ts$/,
            /node_modules/,
            /(ngfactory|ngstyle)\.js/,
          ],
        },
      ],
    },
  }
  

3. 确认angular.json中的项目名称占位符已替换 #

将配置中的$PROJECT替换为你的实际项目名称（比如项目名为my-app，则改为my-app:build:e2e），否则Angular无法找到正确的构建目标：

"serve-coverage": {
  "builder": "@angular-builders/custom-webpack:dev-server",
  "options": {
    "browserTarget": "你的项目名:build:e2e"
  }
},

4. 验证webpack配置是否生效 #

运行以下命令构建e2e环境的代码，检查dist目录下的输出文件是否包含插桩代码：

ng build --configuration e2e

打开dist中的任意js文件，搜索__coverage__变量，如果存在说明插桩成功；如果不存在，说明custom-webpack配置未被正确应用，需检查：

• angular.json中build.configurations.e2e的customWebpackConfig.path路径是否正确（确保路径相对于项目根目录）
• 是否已安装@angular-builders/custom-webpack依赖：

  npm install --save-dev @angular-builders/custom-webpack
  

5. 检查依赖版本兼容性 #

确保以下依赖版本匹配：

• @cypress/code-coverage需与Cypress版本兼容
• @angular-builders/custom-webpack需与你的Angular主版本匹配（比如Angular 16对应^16.x.x版本）

6. 调整构建配置的sourceMap设置 #

确保angular.json中build.configurations.e2e的sourceMap仅针对脚本启用，避免样式文件干扰：

"e2e": {
  "extractLicenses": false,
  "sourceMap": {
    "scripts": true,
    "styles": false
  },
  "namedChunks": true,
  "vendorChunk": true,
  "customWebpackConfig": {
    "path": "./cypress/coverage.webpack.ts"
  }
}

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