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

第一个覆盖率数据

Note

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

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

作为新项目开始

安装

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

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

在 Babel 配置文件  中添加 istanbul 和 canyon 插件：

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

检查

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

coverage-canyon-console

配置 CI 环境变量

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

💡
Tip

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

  1. DSN 和 REPORTER
  • 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 服务端，即可实现覆盖率数据的实时展示。

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

UI 自动化测试手动测试
介绍入门