从 typescript 中的 angular5 应用程序获取 Cobertura 覆盖范围答案

【问题标题】：Get Cobertura coverage from an angular5 app in typescript从 typescript 中的 angular5 应用程序获取 Cobertura 覆盖范围
【发布时间】：2018-10-14 17:38:46
【问题描述】：

我目前正在开展一个项目，我们希望为我们的单元测试提供一些代码覆盖率。测试运行良好，但我无法获得正确的覆盖范围。

我们的 CiCd 在 VSTS 中运行，它请求导出 Cobertura 或 JaCoCo 中的代码覆盖率以发布结果。

所以我们的应用程序是一个完全用 TypeScript 编写的 Angular 5 应用程序，其中每个组件/模块/嵌入的规范文件...

我们的测试使用 karma、jasmine、chrome 运行，我的 karma.conf.js 现在看起来像这样：

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular/cli'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular/cli/plugins/karma'),
      require('karma-junit-reporter'),
      require('karma-remap-coverage'),
      require('karma-coverage'),
    ],
    client:{
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    files: [
      { pattern: 'src/**/*.ts' }
    ],
    preprocessors: {
      './src/**/*.ts': ['coverage']
    },
    coverageIstanbulReporter: {
      reports: [ 'cobertura' ],
      fixWebpackSourcePaths: true
    },
    coverageReporter: {
      type: 'in-memory'
    },
    remapOptions: {
      basePath: './src'
    },
    remapIstanbulReporter: {
      reports: {
        html: 'coverage',
        cobertura: './coverage/cobertura.xml',
      }
    },
    remapCoverageReporter: {
      'text-summary': null, // to show summary in console
      html: './coverage/html',
      cobertura: './coverage/cobertura.xml'
    },
    angularCli: {
      config: './angular-cli.json',
      environment: 'dev',
      codeCoverage: true
    },
    reporters: ['progress', 'junit', 'coverage', 'remap-coverage'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,
    sourceMaps: true
  });
};

有一个 junit 的配置，因为 VSTS 也可以在 junit 中导出结果，但我认为这不是我现在问题的原因。此外，conf 文件可能有一些配置，但由于我昨天为使其正常工作所做的所有测试而存在。

我担心的是代码覆盖没有完成，因为控制台在运行结束时输出它：

=============================== Coverage summary ===============================
Statements   : 100% ( 0/0 )
Branches     : 100% ( 0/0 )
Functions    : 100% ( 0/0 )
Lines        : 100% ( 0/0 )
================================================================================

但我确信我的测试没问题： Chrome 66.0.3359 (Mac OS X 10.12.6)：执行 264 of 291（跳过 27）成功（9.286 秒/0 秒）

在运行开始时我也有很多错误显示：

04 05 2018 10:51:51.473:ERROR [preprocessor.coverage]: Line 1: Unexpected token
  at /Users/user/Documents/work/project/src/app/settings/settings.component.spec.ts
Failed to parse file: /Users/user/Documents/work/project/src/app/settings/settings.component.ts

也许它可以来自这里？但我不知道这些错误是什么以及为什么会出现这些错误。

总的来说，我发现很难在网上找到一个很棒的教程，有很多不同的库相互调用（karma / coverage / istanbul / karma-typescript / ....）而且他们的文档相当光。

我做错了什么？我该如何解决这个问题？

【问题讨论】：

你能修复它吗？
还没有！ :( 遗憾的是，在 VSTS 上没有找到任何教程或任何可以做到这一点的东西....

标签： typescript karma-jasmine cobertura karma-coverage

【解决方案1】：

我无法解释您在 settings.component.spec.ts 中遇到的错误。但是，这就是您得到错误的覆盖范围摘要的原因。每当由于错误而没有完全执行测试时，就不会计算覆盖率，并且您会在覆盖率中获得上述摘要。

【讨论】：