使用Gulp+Karma+Jasmine+Angular 4时覆盖率报告为空的问题排查

我帮你梳理下问题根源和解决方案：

核心问题分析 #

你遇到的空覆盖率报告问题，主要是两个原因叠加导致的：

1. Karma配置冲突：在test任务里直接硬编码了preprocessors等配置，覆盖了karma.conf.js中原本的测试文件匹配规则，导致Karma找不到要运行的测试用例。
2. 任务依赖缺失：test任务没有依赖compile-ts，可能导致测试执行时还没生成编译后的JS文件，进一步让测试无法运行。

另外，action: 'run'和singleRun: true是重复配置，Karma中singleRun: true已经包含了"运行一次后退出"的逻辑，保留一个即可。

解决方案 #

1. 修复test任务的配置与依赖

修改test任务，移除可能冲突的preprocessors配置，同时添加compile-ts作为依赖，确保测试前先编译TypeScript文件：

gulp.task('test', ['compile-ts'], function (done) {
  return new Server({
    configFile: __dirname + '/karma.conf.js',
    singleRun: true,
    // 只保留覆盖率报告相关配置，测试文件和预处理规则交给karma.conf.js管理
    reporters: ['progress', 'coverage'],
    coverageReporter: {
      type : 'html',
      dir : 'coverage/',
      subdir: '.'
    }
  }, done).on('error', function(err) {
    throw err;
  }).start();
});

2. 确保karma.conf.js配置正确

在你的karma.conf.js中，要明确配置测试文件路径和需要做覆盖率的源文件，示例如下：

module.exports = function(config) {
  config.set({
    // 其他基础配置（比如框架、浏览器等）
    files: [
      // 配置你的测试文件路径，比如所有.spec.js文件
      'src/app/**/*.spec.js'
    ],
    preprocessors: {
      // 配置需要生成覆盖率的源文件路径
      'src/app/accordion/*.js': ['coverage']
    }
  });
};

3. 验证执行流程

按以下步骤验证：

• 先单独执行gulp compile-ts，确认src/app下生成了编译后的JS文件
• 再执行gulp test，确认测试用例能正常运行
• 最后执行gulp coverage，此时应该能生成包含数据的覆盖率报告并自动打开

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