Skip to Content
DocumentationGetting Started首次获取覆盖率数据

首次获取覆盖率数据

Note

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

按照以下步骤完成您的首次覆盖率数据报告：

新项目开始

安装

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

npm install babel-plugin-istanbul @canyonjs/babel-plugin -D

将 istanbul 和 canyon 插件添加到您的 Babel 配置文件 中：

babel.config.js
module.exports = {
  plugins: [
    "istanbul",
    "@canyonjs",
    // 注意插件顺序：canyon 插件应在 istanbul 插件之后
  ],
};

验证

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

coverage-canyon-console

更新 Babel 插件激活条件

在 CI 阶段，我们需要控制插件激活条件，以防止在生产分支中进行插桩。

module.exports = {
  plugins:
    process.env.CI && process.env.CI_COMMIT_REF_NAME !== "release" ? ["istanbul", "@canyonjs"] : [],
};

CI中收集初始覆盖率数据

在 CI 环境中，您可以通过运行测试用例来收集初始覆盖率数据。这有助于建立代码覆盖率的基准线。

以下是一个 GitLab CI/CD 配置示例：

.gitlab-ci.yml
pages:
  image: node:20
  stage: deploy
  script:
    - npm i pnpm -g
    - pnpm i
    - pnpm run build
    - npm i @canyonjs/cli -g
    - canyon -h
    - canyon upload --dsn=https://app.canyonjs.io/api/coverage/map/init
    - mv dist/* public
  artifacts:
    paths:
      - public
  only:
    - main

报告覆盖率数据

等待 CI 完成后，将页面部署到测试环境。为了收集人工测试的覆盖率数据，您需要在 HTML 文件中引入 Canyon 收集脚本：

<script src="https://unpkg.com/@canyonjs/collect"></script>
<script>
  window.CANYON_DSN = "https://app.canyonjs.io/api/coverage/client";
  window.CANYON_SCENE = {
    hello: "world",
  };
</script>

配置完成后，随后的测试就会不断收集上报覆盖率数据到服务端。

介绍快速开始