Nx Angular Monorepo中Cypress组件测试代码覆盖率问题

针对你在Nx Monorepo中无法生成两个库组件的合并Cypress组件测试覆盖率报告，且.nyc_output/out.json为空的问题，可按以下步骤排查和解决：

1. 修正源码插桩配置 #

问题核心通常是插桩规则未正确命中库的源码文件。需为每个库单独配置webpack规则，确保仅对业务代码插桩：

步骤1：配置库的测试target #

在每个库（如mylib-a、mylib-b）的project.json中，为component-test target指定自定义webpack配置：

"targets": {
  "component-test": {
    "executor": "@nx/cypress:cypress",
    "options": {
      "cypressConfig": "libs/mylib-a/cypress.config.ts",
      "testingType": "component",
      "webpackConfig": "libs/mylib-a/webpack.config.js"
    }
  }
}

步骤2：编写webpack插桩规则 #

在每个库的根目录创建webpack.config.js，配置babel-loader和istanbul插件：

const path = require('path');

module.exports = {
  module: {
    rules: [
      {
        test: /\.(ts|js)$/,
        include: [path.resolve(__dirname, 'src')], // 仅对当前库的源码插桩
        exclude: /node_modules|\.spec\.ts$|\.cy\.ts$/, // 排除依赖、测试文件
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-typescript'],
            plugins: ['istanbul']
          }
        }
      }
    ]
  }
};

2. 配置Cypress覆盖率收集 #

确保Cypress正确注册覆盖率任务：

步骤1：修改cypress.config.ts #

在每个库的cypress.config.ts中添加覆盖率任务注册：

import { defineConfig } from 'cypress';
import { nxComponentTestingPreset } from '@nx/angular/plugins/component-testing';
import codeCoverageTask from '@cypress/code-coverage/task';

export default defineConfig({
  component: {
    ...nxComponentTestingPreset(__dirname),
    setupNodeEvents(on, config) {
      codeCoverageTask(on, config);
      return config;
    }
  }
});

步骤2：导入覆盖率支持文件 #

在每个库的cypress/support/component.ts中添加：

import '@cypress/code-coverage/support';

3. 统一覆盖率输出路径（关键） #

Monorepo下默认每个库的覆盖率数据会独立存储，需通过根目录的.nycrc统一配置，实现数据合并：

{
  "all": true,
  "include": [
    "libs/mylib-a/src/**/*.ts",
    "libs/mylib-b/src/**/*.ts"
  ],
  "exclude": [
    "**/*.spec.ts",
    "**/*.cy.ts",
    "**/*.stories.ts"
  ],
  "report-dir": "./coverage",
  "temp-dir": "./.nyc_output"
}

4. 运行测试并生成合并报告 #

执行以下命令完成测试和报告生成：

1. 清理旧数据：

rm -rf .nyc_output coverage

2. 依次运行两个库的组件测试：

nx run mylib-a:component-test
nx run mylib-b:component-test

3. 生成合并覆盖率报告：

nyc report --reporter=html --reporter=lcov

执行完成后，根目录的coverage文件夹中会生成包含两个库组件的合并覆盖率报告。

排查空out.json的常见原因 #

• 检查webpack配置的include路径是否正确，可通过console.log(path.resolve(__dirname, 'src'))输出路径验证
• 确认已排除测试文件（.spec.ts、.cy.ts），避免插桩错误
• 检查Cypress的setupNodeEvents是否正确注册了codeCoverageTask
• 确保安装所有依赖：@babel/core、babel-loader、@babel/preset-typescript、babel-plugin-istanbul、@cypress/code-coverage、nyc

内容的提问来源于stack exchange，提问作者Rudolf Traunmüller