@canyonjs/report-html
Source一个覆盖率报告器，适配istanbul-reports 接口
安装
npm install --save-dev @canyonjs/report-html使用
该报告器适配istanbuljs报告器接口，所以支持各种常见的测试框架的覆盖率报告生成，以vitest为例
import { defineConfig } from 'vitest/config';
export default defineConfig({
test: {
coverage: {
provider: 'v8',
reporter: ['json', '@canyonjs/report-html'],
},
},
});
配置
Important
支持传入git diff，生成变更代码覆盖率报告！默认读取diff.txt文件内容
import { defineConfig } from 'vitest/config';
const diff = `diff --git a/fixtures/sum.js b/fixtures/sum.js
index 1234567..abcdefg 100644
--- a/fixtures/sum.js
+++ b/fixtures/sum.js
@@ -1,3 +1,5 @@
export function sum(a, b) {
+ // 新增的注释
return a + b;
+ // 另一个新增的注释
}
diff --git a/fixtures/add.js b/fixtures/add.js
index 1234567..abcdefg 100644
--- a/fixtures/add.js
+++ b/fixtures/add.js
@@ -1,3 +1,6 @@
export function sum(a, b) {
+ // 新增的注释行
+ console.log('计算中...');
return a + b;
+ // 结束注释
}`
export default defineConfig({
test: {
coverage: {
provider: 'v8',
reporter: ['json', [
'@canyonjs/report-html',
{
diff:diff // 支持git diff字符串内容传入
}
]],
},
},
});
CI集成
我们提供了@canyonjs/git-diff，用于侦测流水线环境，输出diff.txt。具体使用请参考@canyonjs/git-diff
例子
| 测试框架 | 示例链接 |
|---|---|
Vitest | report-html-vitest |
Jest | report-html-jest |
RSTest | report-html-rstest |
Mocha | report-html-mocha |
Test Runner | report-html-test-runner |
输出
- index.html，单个html文件，易于传输/部署或直接在任何位置打开。
- data/report-data.js，对应压缩过的覆盖率数据及源码内容。
- js、css等静态资源。
报告期界面
覆盖率概览
变更代码覆盖率
