Karma 测试：测量未测试代码的覆盖率

Question

我已经成功地为我用 Typescript 编写的沙箱项目设置了 Karma 和 Webpack 测试。 代码覆盖率指标由Istanbul Instrumenter Loader 收集。 令我烦恼的是， 我只报告了测试中导入的模块的覆盖率，因此报告的 100% 覆盖率实际上是一个肮脏的谎言。

寻找解决方案，我在Istanbul Instrumenter Loader的自述文件中找到了一段：

要为所有组件（即使对于那些还没有测试的组件）创建代码覆盖率报告，您必须需要所有 1) 源和 2) 测试。

测试/index.js

 // requires all tests in `project/test/src/components/**/index.js` const tests = require.context('./src/components/', true, /index\\.js$/); tests.keys().forEach(tests); // requires all components in `project/src/components/**/index.js` const components = require.context('../src/components/', true, /index\\.js$/); components.keys().forEach(components);

如果我理解正确，此代码段会遍历源目录中的所有索引文件并从中导入所有内容。 我的问题是：如何正确地将此代码段转换为 Typescript？ 或者是否有更好的解决方案不需要import * from *解决方法？

编辑

我发现了这个问题： Typescript 1.8 modules: import all files from folder 。 这是否意味着我需要一个index.ts文件来导入每个模块？ 这意味着每次我引入一个新的模块文件时，我都必须手动将其导入添加到index.ts ？ 一定会有更好的办法。

编辑 2

我也对其他可以为整个代码库生成覆盖率报告的工具持开放态度，这是它们能够处理 Typescript + Webpack + Karma + Mocha 堆栈的唯一条件。 我试过nyc ，但根本无法获得任何代码覆盖率。

编辑 3

这是上面的index.js翻译成 Typescript：

declare const require: any;

const ctx = require.context('../src', true, /\.ts$/);
ctx.keys().map(ctx);

编辑 4

现在有一个名为karma-sabarivka-reporter的 karma 插件可以纠正覆盖率统计数据。 查看已接受的答案以了解详细信息。

Answer 1

重要的：

这个答案并不能解决上述问题，从根本上是错误的。 看评论。

---

NYC 支持使用--all标志覆盖未经测试的代码。 假设你在package.json的test命令是

"test": "karma start karma.conf.js",

您可以在npm install -D nyc ts-node之后测试覆盖率，您可以添加以下命令并运行它。 此命令要求源代码检查src目录中的覆盖率。

"coverage": "nyc --all --include src --extension .ts --require ts-node/register npm test",

• --all标志用于检查所有文件的覆盖范围。
• --extension .ts用于检查所有 TypeScript 文件，您可以添加更多扩展名，如--extension .ts --extension .tsx 。
• --include src用于检查覆盖范围的目录。
• -- require ts-node/register是教 NYC 理解 TypeScript。

之后，您应该会看到包含的所有 .ts 文件。

注意：使用ts-node/register可能会导致报告中的行号出现问题。 要解决这个问题，您可能还需要注册源映射支持。

Answer 2

对于使用 Karma +Istanbul 作为覆盖报告器进行测试的项目 - 我刚刚创建了 karma 插件，它将项目中的所有文件添加到覆盖率统计 - https://github.com/kopach/karma-sabarivka-reporter 。

使用它 -> 安装npm install --save-dev karma-sabarivka-reporter

并像这样更新karma.conf.js ：

reporters: [
  // ...
  'sabarivka'
  // 'coverage-istanbul' or 'coverage' (reporters order is important for 'coverage' reporter)
  // ...
],
coverageReporter: {
  include: [
      // Specify include pattern(s) first
      'src/**/*.(ts|js)',
      // Then specify "do not touch" patterns (note `!` sign on the beginning of each statement)
      '!src/main.(ts|js)',
      '!src/**/*.spec.(ts|js)',
      '!src/**/*.module.(ts|js)',
      '!src/**/environment*.(ts|js)'
  ]
},