角度测试 - 生成覆盖率报告时出错答案

【问题标题】：Angular testing - Error generating coverage report角度测试 - 生成覆盖率报告时出错
【发布时间】：2019-02-11 13:06:25
【问题描述】：

我正在尝试从ng test --code-coverage 获取报道报告。没有覆盖，测试运行没有问题，但是我得到这个错误：

ERROR [karma]: TypeError: Cannot read property 'replace' of undefined
  at fixPathSeparators (<path>\node_modules\karma-coverage-istanbul-reporter\src\util.js:20:21)
  at Object.fixWebpackSourcePaths (<path>\node_modules\karma-coverage-istanbul-reporter\src\util.js:41:16)
  at Object.keys.forEach.filename (<path>\node_modules\karma-coverage-istanbul-reporter\src\reporter.js:46:44)
  at Array.forEach (<anonymous>)
  at addCoverage (<path>\node_modules\karma-coverage-istanbul-reporter\src\reporter.js:43:27)
  at createReport (<path>\node_modules\karma-coverage-istanbul-reporter\src\reporter.js:98:7)
  at browsers.forEach.browser (<path>\node_modules\karma-coverage-istanbul-reporter\src\reporter.js:213:9)
  at Array.forEach (<anonymous>)
  at Collection.forEach (<path>\node_modules\karma\lib\browser_collection.js:93:21)
  at CoverageIstanbulReporter.onRunComplete (<path>\node_modules\karma-coverage-istanbul-reporter\src\reporter.js:212:16)
  at Server.<anonymous> (<path>\node_modules\karma\lib\events.js:13:22)
  at emitTwo (events.js:131:20)
  at Server.emit (events.js:214:7)
  at Timeout._onTimeout (<path>\node_modules\karma\lib\executor.js:51:17)
  at ontimeout (timers.js:498:11)
  at tryOnTimeout (timers.js:323:5)

一些调试显示伊斯坦布尔内部使用的sourceMap 没有属性sourceRoot。我尝试将其添加到几个配置文件中，但没有成功。

在我的karam.conf.js 我有：

coverageIstanbulReporter: {
  dir: require('path').join(__dirname, '../coverage'),
  reports: ['html', 'lcovonly'],
  fixWebpackSourcePaths: true
}

非常奇怪的是，我的项目包含一个带有单独测试的库。它们使用相同的配置。

事实：

Angular 6.1.0
茉莉花2.99.1
业力 1.7.1
Karma 报道伊斯坦布尔记者：2.0.0

谢谢！

【问题讨论】：

尝试将您的coverageIstanbulReporter 中的报告更改为：reports: ['text-summary', 'html', 'lcovonly'],。如果我遗漏了文本摘要，我会遇到与您类似的错误，所以可能值得一试。
@MichaelKie 谢谢，不幸的是，这个更改仍然存在错误:-(
也许尝试更新 Karma Coverage Istanbul Reporter，我使用的是 ~2.0.0，0.2.2 似乎很旧。
抱歉，我发错号码了。我也是~2.0.0。我更新了原帖。
This 是我正在使用的确切配置，我在代码覆盖率方面没有任何问题，如果这对您没有帮助，我没有想法，对不起！

标签： angular typescript code-coverage source-maps istanbul

【解决方案1】：

解决了！

我有一个自定义库，它是项目的一部分，并在带有<clib-element></clib-element> 的组件中使用。

在父组件的component.spec.ts中我是这样导入的：

TestBed.configureTestingModule({
  ...
  imports: [ CLibModule ] /* Don't do it like this */
})

相反，我不得不模拟使用过的组件。我写了这个模拟组件：

@Component({
  selector: 'clib-element' /* Important: Same selector as real component */
})
export class ElementMockComponent {
  /* declare used methods and attributes */
}

在测试文件中声明：

TestBed.configureTestingModule({
  ...
  declarations: [ ElementMockComponent ]
})

... 并且错误消失了。希望这对其他人也有帮助！

【讨论】：