Skip to Content
文档开始第一个覆盖率数据

第一个覆盖率数据

Note

Canyon 提供常见框架的安装指南,帮助您快速上手。

跟着以下步骤完成第一个覆盖率数据上报:

作为新项目开始

安装

在前端工程化和模块化开发中离不开Babel,对于Babel项目只需安装两个Babel插件,即可快速开始。

npm install babel-plugin-istanbul babel-plugin-canyon -D

Babel 配置文件 中添加 istanbulcanyon 插件:

babel.config.js
module.exports = { plugins: [ 'canyon', 'istanbul' ], };

检查

配置完成后,启动项目并在控制台打印 window.__coverage__。如果输出与下图一致,则表示代码插桩成功。

coverage-canyon-console

配置 CI 环境变量

在 CI 环境中,我们需要配置一些环境变量以便上报覆盖率数据。

💡
Tip

canyon会在编译时侦测流水线变量,我们适配了多个流水线供应商
没有您的流水线供应商?尝试显式配置

  1. DSNREPORTER
  • DSN:覆盖率数据上报的服务地址,{{url}}/coverage/client,其中 {{url}} 为 Canyon 服务地址。
  • REPORTER:用户 token,可在Canyon用户设置页面查看。
  1. 配置 CI 平台变量

gitlab

ℹ️

其中,项目 ID、分支和 SHA 无需手动配置,Canyon 插件会自动侦测流水线环境变量。

更新babel插件生效条件

在 CI 阶段,我们需要控制插件生效的条件,以防止在生产分支插桩。

module.exports = { plugins: (process.env.CI && process.env.CI_COMMIT_REF_NAME !== 'release') ? [ 'canyon', 'istanbul' ]:[], };

上报覆盖率数据

等待 CI 完成后,页面发布到测试环境。

此时,覆盖率数据已存储在浏览器中。随着用户操作或UI自动化测试的执行,window.__coverage___数据会不断累积。

将这些数据准确无误的上报至 Canyon 服务端,即可实现覆盖率数据的实时展示。

以下是上报覆盖率数据的几种方式: