Karma，覆盖率报告结合 webpack

Posted 2023-03-16

【中文标题】Karma，覆盖率报告结合 webpack

【英文标题】：Karma, coverage report combined with webpack

【发布时间】：2017-01-27 00:20:06

【问题描述】：

我已经设置了 karma 以及正在工作的覆盖率工具 - 但由于我也在使用 webpack，所以覆盖率报告使用的是 webpack 创建的捆绑代码。

例如： 我有一个包含外部库的 Typescript 文件，因此为了让该文件运行它需要 webpack。然后 Webpack 将该文件包含到已编译的 JS 中。 这意味着当我得到覆盖率报告时，它的百分比很低，因为我没有测试现在已包含的外部文件。

preprocessors: 
            './src/**/*.ts': ['webpack', 'coverage']
        ,

如果我删除 webpack 部分或将数组放在相反的位置 (['coverage', 'webpack'])，它会失败。

所以，我不确定我所追求的是否可能，因为没有 webpack 和编译的 TS -> JS 文件将无法通过测试。有点像我希望分两步完成报告。

针对捆绑的代码运行测试并返回报告。 检查运行的测试并与非捆绑文件进行比较以获得准确的覆盖率报告。

如果它对任何答案都有影响，我也在使用 Jasmine 作为框架。

【参考方案1】：

您可以尝试使用https://github.com/deepsweet/istanbul-instrumenter-loader 来解决您的问题，一个 webpack 加载器从非捆绑的源 js 文件生成覆盖率报告。

但是插件不支持es6，可以参考issue#33找到合适的解决方案。

【参考方案2】：

花了一段时间 - 但我找到了一个很好的例子，它可以满足我的需求以及我想要的方式。 https://github.com/AngularClass/angular2-webpack-starter 这适用于 Typescript、Karma、Coverage 和 Webpack。

还有 - https://angularclass.github.io/angular2-webpack-starter/

【讨论】：

链接往往会死掉。请在答案中包含解决方案。