如何解决Angular 11单元测试代码覆盖率现已突破
在升级到Angular 11之前,我通过以下命令对单元测试进行了代码覆盖:
ng test --project my-app --code-coverage true
当我将项目升级到Angular 11时,我仍然可以进行代码覆盖率测试,但是我开始收到一条消息,指出“自11版以来,'karma-coverage-istanbul-reporter'的用法已被弃用”。它要求我安装karma-coverage并更新karma.conf.js。所以我按照它的要求做了。我通过以下命令安装了karma-coverage和karma:
npm install karma karma-coverage --save-dev
结果,我在我的package.json中的devDependencies下看到了业力的条目:
"karma": "^5.2.3",<br>
"karma-coverage": "^2.0.3"
我更新了karma.conf.js文件。以下是存在的内容,除了我的评论之外,一切都与原来一样:
module.exports = function (config) {
config.set({
basePath: '',frameworks: ['jasmine','@angular-devkit/build-angular'],plugins: [
require('karma-jasmine'),require('karma-chrome-launcher'),require('karma-jasmine-html-reporter'),require('karma-coverage'),// NEWLY ADDED
// ORIGINALLY HERE Now REMOVED require('karma-coverage-istanbul-reporter'),require('@angular-devkit/build-angular/plugins/karma')
],client: {
clearContext: false // leave Jasmine Spec Runner output visible in browser
},reporters: ['progress','kjhtml','coverage'],// coverageIstanbulReporter NO LONGER HERE
//coverageIstanbulReporter: {
// dir: require('path').join(__dirname,'../../coverage/my-app'),// reports: ['html','lcovonly','text-summary'],// fixWebpackSourcePaths: true
//},// coverReporter NEWLY ADDED
coverageReporter: {
dir: 'build/reports/coverage',reporters: [
{ type: 'html',subdir: 'report-html' },{ type: 'lcov',subdir: 'report-lcov' }
]
},// THE FOLLOWING REMAINED AS IS
port: 9876,colors: true,logLevel: config.LOG_INFO,autoWatch: true,browsers: ['Chrome'],singleRun: false,restartOnFileChange: true
});
};
进行此更新后,发生了两件事,我不知道为什么。
-
当我运行普通的代码覆盖率命令时,出现以下错误:“服务器在端口9876上启动失败:错误:必须安装karma-coverage才能运行代码覆盖率。”我确实按照package.json的指示安装了它,但是由于某种原因,我的项目无法识别出它。另外,如果我将arma-coverage-istanbul-reporter require方法重新添加到我的conf.js文件中,覆盖效果很好,但是我仍然收到该弃用消息。谁能向我解释为什么我会收到此错误?
-
当我在没有覆盖范围的情况下运行测试时,我现在收到多个前所未有的警告,例如:“无法从文件扩展名确定文件类型,默认为js。 要使警告静音,请在配置文件中为C:/Angular/my-project/projects/my-app/src/app/app.component.spec.ts指定一个有效的类型。”我需要采取什么措施来解决此问题? ?
编辑:我找到了答案。在coverageReporter对象内部,您需要将fixWebpackSourcePaths属性添加为true:
coverageReporter: {
dir: 'build/reports/coverage',reporters: [
{ type: 'html',subdir: 'report-lcov' }
],fixWebpackSourcePaths: true
},
解决方法
对我来说,诀窍是从记者中删除'coverage'
。应该是:
reporters: ['progress','kjhtml'],
然后按预期创建覆盖率报告,而不会引发奇怪的警告。
这似乎是Angular的方式,请看一下karma.conf.js
generated by the ng new
schematics。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。