Angular执行ng test --code-coverage后空覆盖率HTML报告问题排查

问题现象 #

执行ng test --code-coverage后，coverage文件夹中的index.html内容为空。此前曾成功生成包含组件覆盖率数据的报告，后续无法复现。先后尝试karma-coverage和karma-coverage-istanbul-reporter两个工具，结果均一致。

使用karma-coverage的配置 #

const path = require('path');

module.exports = function(config) {
    config.set({
        webpack: { node: { fs: 'empty' } },
        basePath: './',
        frameworks: ['jasmine', '@angular-devkit/build-angular'],
        plugins: [
            require('karma-jasmine'),
            require('karma-chrome-launcher'),
            require('karma-safari-launcher'),
            require('karma-jasmine-html-reporter'),
            require('karma-coverage'),
            require('@angular-devkit/build-angular/plugins/karma')
        ],
        client: {
            clearContext: false, // leave Jasmine Spec Runner output visible in browser
            jasmine: {
                random: false,
                verboseDeprecations: true
            }
        },
        coverageReporter: {
            dir: require('path').join(__dirname, './coverage/SecurusOnline'),
            subdir: '.',
            reporters: [
                { type: 'html' },
                { type: 'text-summary' },
            ],
            check: { // Optional: Enforce code coverage thresholds
                global: {
                statements: 80,
                branches: 80,
                functions: 80,
                lines: 80,
                },
            },
            'report-config': {
                html: {subdir: 'html'}
            },
            verbose: true // output config used by istanbul for debugging
        },
        files: ['src/test.ts'],
        include: ['src/**/*.spec.ts', 'src/**/*.d.ts', 'src/polyfills.ts'],
        reporters: ['progress', 'kjhtml'],
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: true,
        browsers: ['Chrome'],
        flags: ['--headless', '--disable-gpu', '--disable-web-security', '--no-sandbox', '--disable-setuid-sandbox'],
        browserDisconnectTimeout: 30000,
        browserDisconnectTolerance: 3,
        browserNoActivityTimeout: 30000,
        captureTimeout: 40000
    })
}

使用karma-coverage-istanbul-reporter的配置 #

const path = require('path');

module.exports = function(config) {
    config.set({
        webpack: { node: { fs: 'empty' } },
        basePath: '',
        frameworks: ['jasmine', '@angular-devkit/build-angular'],
        plugins: [
            require('karma-jasmine'),
            require('karma-chrome-launcher'),
            require('karma-safari-launcher'),
            require('karma-coverage-istanbul-reporter'),
            require('@angular-devkit/build-angular/plugins/karma')
        ],

        coverageIstanbulReporter: {
            reports: ['html', 'lcovonly', 'text-summary'],
            dir: path.join(__dirname, 'coverage'),
            combineBrowserReports: true,
            fixWebpackSourcePaths: true,
            skipFilesWithNoCoverage: true,
            'report-config': {
                html: {subdir: 'html'}
            },
            thresholds: {
                emitWarning: false, 
                global: {
                    statements: 100,
                    lines: 100,
                    branches: 100,
                    functions: 100
                },
                each: {
                    statements: 100,
                    lines: 100,
                    branches: 100,
                    functions: 100,
                    overrides: {
                        'baz/component/**/*.js': {
                            statements: 98
                        }
                    }
                }
            }
        },
        client: {
            clearContext: false, // leave Jasmine Spec Runner output visible in browser
            jasmine: {
                random: false,
                verboseDeprecations: true
            }
        },
        mime: {
            'text/x-typescript': ['ts', 'tsx']
        },
        files: ['src/test.ts'],
        include: ['src/**/*.spec.ts', 'src/**/*.d.ts', 'src/polyfills.ts'],
        reporters: ['coverage-istanbul'],
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: true,
        browsers: ['Chrome'],
        flags: ['--headless', '--disable-gpu', '--disable-web-security', '--no-sandbox', '--disable-setuid-sandbox'],
        singleRun: true,
        watch: true
    })
}

可能的原因分析 #

1. 测试用例未实际执行 #

• 检查ng test控制台输出，确认是否有测试用例被执行。若测试用例全部跳过或未被检测到，覆盖率工具无数据可生成报告。
• 排查src/test.ts是否正确导入所有测试文件，或是否有配置变更导致测试文件未加载。

2. 覆盖率工具与Angular版本不兼容 #

• 确认karma-coverage、karma-coverage-istanbul-reporter版本与当前Angular CLI版本匹配。Angular升级后，旧插件可能无法正常工作。
• 尝试卸载重装插件：

  npm uninstall karma-coverage karma-coverage-istanbul-reporter
  npm install karma-coverage karma-coverage-istanbul-reporter --save-dev
  

3. 路径或报告目录问题 #

• karma-coverage配置：最终报告路径为coverage/SecurusOnline/html/index.html，检查是否找错了文件位置。
• karma-coverage-istanbul-reporter配置：报告路径为coverage/html/index.html，确认是否查看了正确目录。
• 检查目录权限，确保Node进程有权限写入coverage文件夹。

4. Webpack配置冲突 #

• 自定义的webpack: { node: { fs: 'empty' } }可能干扰覆盖率工具的源码转换逻辑，尝试移除该配置后重试。
• Angular CLI自带的Webpack配置可能与自定义配置冲突，导致覆盖率插桩失效。

5. 无头Chrome执行异常 #

• 去掉--headless参数，在可视化模式下运行ng test，观察测试是否能正常完成。
• 检查Chrome版本是否过旧，升级到最新稳定版后重试。

6. 缓存问题 #

• Angular CLI缓存的旧构建结果可能导致覆盖率插桩未生效，清理缓存后重试：

  ng clean
  rm -rf node_modules/.cache
  

7. 覆盖率阈值配置干扰（仅istanbul） #

• 暂时注释掉coverageIstanbulReporter.thresholds配置，测试是否能生成报告。虽然阈值不达标通常只会抛错，但极端情况下可能影响报告生成。

内容的提问来源于stack exchange，提问作者Adventitious Angles Qs Poster