Angular13 Angular 代码覆盖率

2024-02-25 开发教程 Angular13 匿名 5

找出你要测试多少代码

CLI 可以运行单元测试并创建代码覆盖率报告。代码覆盖率报告会向你展示代码库中可能无法通过单元测试进行正确测试的任意部位。

如果你要试验本指南中所讲的应用,请在浏览器中运行它下载并在本地运行它

要生成覆盖率报告,请在项目的根目录下运行以下命令。

ng test --no-watch --code-coverage

测试完成后,该命令会在项目中创建一个 ​/coverage​ 目录。打开 ​index.html​ 文件,可以查看带有源代码和代码覆盖率值的报表。

如果要在每次测试时都创建代码覆盖率报告,可以在 CLI 配置文件 ​angular.json​ 中设置以下选项:

"test": {
"options": {
"codeCoverage": true
}
}

代码覆盖的实施

代码覆盖率可以让你估算出你的代码测试了多少。如果你的团队确定要设置单元测试的最小覆盖率,可以使用 Angular CLI 来强制实施这个最低要求。

比如,假设你希望代码库的代码覆盖率至少达到 80%。要启用此功能,请打开 Karma 测试平台的配置文件 ​karma.conf.js​,并在 ​coverageReporter:​ 键下添加 ​check ​属性。

coverageReporter: {
dir: require('path').join(__dirname, './coverage/<project-name>'),
subdir: '.',
reporters: [
{ type: 'html' },
{ type: 'text-summary' }
],
check: {
global: {
statements: 80,
branches: 80,
functions: 80,
lines: 80
}
}
}

check ​属性会让该工具在项目中运行单元测试时强制要求至少 80%的代码覆盖率。

可以在此处找到关于其它覆盖率配置项的更多信息。