Angular2项目集成Karma Coverage异常：覆盖率100%却显示(0/0)

这种情况本质是Karma的覆盖率工具根本没找到需要统计的源文件，相当于没执行任何覆盖分析，所以才会出现"100%"但实际是(0/0)的矛盾结果。下面是针对性的排查和修复方案：

1. 检查Karma配置的核心项 #

首先确认你的Karma配置里，是否正确指定了源文件路径，并且配置了预处理器让覆盖率工具处理这些文件。示例调整如下：

module.exports = function (config) {
  const testWebpackConfig = require('./config/webpack/webpack.test.js')({ env: 'test' });
  const configuration = {
    // ... 其他原有配置
    files: [
      // 测试入口文件
      { pattern: './src/test.ts', watched: false },
      // 源文件：设置included:false避免直接注入，由webpack打包引入
      { pattern: './src/**/*.ts', included: false, watched: true }
    ],
    preprocessors: {
      // 让webpack、sourcemap和coverage工具处理测试入口
      './src/test.ts': ['webpack', 'sourcemap', 'coverage']
    },
    // ... 其他原有配置
  };
  config.set(configuration);
};

2. 正确配置覆盖率报告器 #

确保Karma里的覆盖率报告器参数正确，指定统计范围和输出格式：

module.exports = function (config) {
  // ... 其他原有配置
  reporters: ['progress', 'coverage'],
  coverageReporter: {
    dir: './coverage',
    reporters: [
      { type: 'html', subdir: 'html' },
      { type: 'text-summary' }
    ],
    // 强制统计所有被webpack处理的源文件（即使没有对应测试用例）
    includeAllSources: true,
    instrumenterOptions: {
      istanbul: { noCompact: true }
    }
  },
  // ... 其他原有配置
};

3. 修复Webpack测试配置 #

你的webpack.test.js需要注入覆盖率统计代码，并且确保源文件被正确处理：

const path = require('path');

module.exports = function (options) {
  return {
    // ... 其他原有webpack配置
    module: {
      rules: [
        // 预加载：在TS编译前注入覆盖率统计代码
        {
          test: /\.ts$/,
          enforce: 'pre',
          loader: 'istanbul-instrumenter-loader',
          include: path.resolve(__dirname, '../../src'), // 源文件根目录
          exclude: [
            /\.spec\.ts$/, // 排除测试文件
            /node_modules/
          ]
        },
        // TS文件编译loader
        {
          test: /\.ts$/,
          loader: 'ts-loader',
          options: { transpileOnly: true },
          exclude: /node_modules/
        },
        // ... 其他原有loader（如html、css loader）
      ]
    },
    // ... 其他原有webpack配置
  };
};

这里关键是istanbul-instrumenter-loader要作为enforce: 'pre'的前置loader，确保在TS编译前完成覆盖率代码注入，同时精准命中源文件、排除测试文件和第三方依赖。

4. 验证测试入口文件 #

确认你的test.ts（或测试入口）正确加载了所有测试文件，比如：

import 'zone.js/dist/zone-testing';
import { getTestBed } from '@angular/core/testing';
import {
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';

// 自动加载所有.spec.ts测试文件
const context = require.context('./', true, /\.spec\.ts$/);
context.keys().map(context);

// 初始化Angular测试环境
getTestBed().initTestEnvironment(
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting()
);

5. 确认运行命令 #

最后确保运行测试时触发了覆盖率统计，比如：

# Angular CLI项目
ng test --code-coverage

# 自定义Karma配置
karma start karma.conf.js --coverage

按上述步骤逐一调整后，Karma就能正确识别并统计源文件的覆盖率了，不会再出现100%但实际无数据的情况。

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