# @bahmutov/cypress-code-coverage 中文文档

规范地址：https://npmcn.com/package/%40bahmutov/cypress-code-coverage/

版本：3\.0\.0
npm 元数据更新时间：2026-09-18T14:25:29.702Z
中文译文更新时间：2026-11-07T15:04:27.518Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40bahmutov/cypress-code-coverage
原文对照：https://npmcn.com/package/%40bahmutov/cypress-code-coverage/?lang=original
项目主页：https://github.com/bahmutov/cypress-code-coverage#readme
源码仓库：https://github.com/bahmutov/cypress-code-coverage

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：86.4 kB，17 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- 运行依赖：13 个
- peer 依赖：cypress \>=15\.10\.0
- 首次发布：2022-03-14T19:31:27.899Z
- 最新版本发布：2026-09-18T14:25:29.319Z
- 近 30 天下载量：37004（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：24（近 12 个月 1 个）

## 中文简介

我版本的 Cypress 代码覆盖插件

## 安装

```sh
npm install @bahmutov/cypress-code-coverage
```

也可以使用：`pnpm add @bahmutov/cypress-code-coverage`、`yarn add @bahmutov/cypress-code-coverage`、`bun add @bahmutov/cypress-code-coverage`

## README

# @bahmutov/cypress-code-coverage (英语) ![cypress version](https://img.shields.io/badge/cypress-13.15.2-brightgreen) [![ci](https://github.com/bahmutov/cypress-code-coverage/actions/workflows/ci.yml/badge.svg?branch=main)](https://github.com/bahmutov/cypress-code-coverage/actions/workflows/ci.yml)

> 我的说法 [Cypress 代码覆盖插件](https://github.com/cypress-io/code-coverage)

{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}被我课程所覆盖 [测试 Swag 仓库](https://cypress.tips/courses/swag-store) 财务报告和审定财务报表 [TDD 计算器](https://cypress.tips/courses/tdd-calculator)

## 安装

```shell
npm install -D @bahmutov/cypress-code-coverage
```

注意: 此插件假设 `cypress` 是您工程中已经安装的对等依赖 .

### 版本数

| 插件版本 | Cypress 版本 |
| --- | --- |
| 单曲 | < v10\] (法语) |
| 页:1 | \>=v10 |

添加到您的 `cypress/support/e2e.js` 文件

```js
// https://github.com/bahmutov/cypress-code-coverage
import '@bahmutov/cypress-code-coverage/support'
```

### Cypress v10+ (英语)

在您的 Cypress 配置文件中注册此插件

```js
// cypress.config.js
module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // https://github.com/bahmutov/cypress-code-coverage
      require('@bahmutov/cypress-code-coverage/plugin')(on, config)

      // IMPORTANT to return the config object
      // with the any changed environment variables
      return config
    },
  },
})
```

### Cypress v9 (英语)

添加到您的 `cypress/support/index.js` 文件

```js
// https://github.com/bahmutov/cypress-code-coverage
import '@bahmutov/cypress-code-coverage/support'
```

从您注册插件 `cypress/plugins/index.js` 文件

```js
// cypress/plugins/index.js
module.exports = (on, config) => {
  // https://github.com/bahmutov/cypress-code-coverage
  require('@bahmutov/cypress-code-coverage/plugin')(on, config)

  // add other tasks to be registered here

  // IMPORTANT to return the config object
  // with the any changed environment variables
  return config
}
```

## 申请书

此插件 **没有** 工具您的代码。 你必须用它自己来装 [伊斯坦布尔.js](https://istanbul.js.org/) 工具。 幸好不难 例如,如果您已经使用 Babel 来转接,您可以添加 [巴尔-普拉金-斯坦布尔](https://github.com/istanbuljs/babel-plugin-istanbul) 给您的 `.babelrc` 和飞行器.

```
{
  "plugins": ["istanbul"]
}
```

请看 [实例](https://npmcn.com/package/%40bahmutov/cypress-code-coverage/#readme-examples) 在下面的段落中,您可能可以找到一个匹配您状况的链接工程,在运行端到端的测试以获得代码覆盖之前,查看如何对您的应用程序的源代码进行定位.

如果您的应用程序已被正确设置, 那么您应该在应用程序的 JavaScript 资源中看到额外的计数器和指令, 如下面的图像显示 .

![Instrumented code](https://npmcn.com/package/%40bahmutov/cypress-code-coverage/images/instrumented-code.png)

你应该看看 `window.__coverage__` “测试 Iframe 下的应用程序”中的对象

![Window coverage object](https://npmcn.com/package/%40bahmutov/cypress-code-coverage/images/window-coverage-object.png)

如果您已经将您的应用程序的代码设置为工具并查看 `window.__coverage__` 对象,然后此插件将把覆盖保存到 `.nyc_output` 文件夹,并在测试结束后生成报告(即使是互动模式)。 在 `coverage/lcov-report` 文件夹.

![Coverage report](https://npmcn.com/package/%40bahmutov/cypress-code-coverage/images/coverage.jpg)

就是这样! 您应该在 Cypress 命令日志中看到此插件的消息

![Plugin messages](https://npmcn.com/package/%40bahmutov/cypress-code-coverage/images/gui.png)

## 关于苍蝇的文书

您可以通过使用 JavaScript 来规范应用程序正在装入的规格 [截取器](https://on.cypress.io/intercept) 召回电话。 简单告诉这个插件 JS 资源 `coverage` 环境对象 :

```js
// cypress.config.js

export default defineConfig({
  e2e: {
    env: {
      coverage: {
        // intercept and instrument scripts matching these URLs
        instrument: '**/calculator/**/*.js',
      },
    },
  },
})
```

此插件将监视应用程序请求的脚本, 并将将所有脚本与匹配 URL 的文字 `**/calculator/**/*.js` 模式.

**关于缓存的说明:** 浏览器可能缓存脚本。 你会看到304状态响应代码。 为了绕过这个圈子,截取从发来的对脚本的请求中去除了"if-none-match"和"if-modifed-since"的缓存头.

### 更多信息

-   读取 [Cypress 代码覆盖范围: 仪器编码](https://on.cypress.io/code-coverage#Instrumenting-code) 指南
-   看着 [代码覆盖](https://youtu.be/C8g5X4vCZJA) 网点
-   观看视频 [Cypress 提示( T)](https://www.youtube.com/playlist?list=PLP9o9QNnQuAYYRpJzDNWpeuOVTwxmIxcI) 处理代码覆盖

### App vs 单位测试

您需要设置您的网络应用程序 。 这意味着当测试完成时 `cy.visit('localhost:3000')` 任何代码 `index.html` 请求应当由您提供工具。 见 [实例](https://npmcn.com/package/%40bahmutov/cypress-code-coverage/#readme-examples) 区域咨询,通常需要粘贴 `babel-plugin-istanbul` 进入你的管道某处.

如果您正在从应用程序代码中直接导入到 Cypress spec 文件来测试单个函数,这被称为"单位测试", Cypress 可以为您设定此情景. 见 [仪器单位测试](https://npmcn.com/package/%40bahmutov/cypress-code-coverage/#readme-instrument-unit-tests) 节.

## 报告

这个 `coverage` 文件夹有几种格式的结果,覆盖原始数据保存于 `.nyc_output` 文件夹。 你可以看到覆盖数字自己。 此插件有 `nyc` 作为依赖,所以应该可以立即使用。 以下是常见的例子:

```shell
# see just the coverage summary
$ npx nyc report --reporter=text-summary
# see just the coverage file by file
$ npx nyc report --reporter=text
# save the HTML report again
$ npx nyc report --reporter=lcov
```

有必要执行 [最低覆盖率](https://github.com/istanbuljs/nyc#common-configuration-options) 数字。 例如:

```shell
$ npx nyc report --check-coverage --lines 80
----------|---------|----------|---------|---------|-------------------
File      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
----------|---------|----------|---------|---------|-------------------
All files |     100 |      100 |     100 |     100 |
 main.js  |     100 |      100 |     100 |     100 |
----------|---------|----------|---------|---------|-------------------

$ npx nyc report --check-coverage --lines 101
----------|---------|----------|---------|---------|-------------------
File      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
----------|---------|----------|---------|---------|-------------------
All files |     100 |      100 |     100 |     100 |
 main.js  |     100 |      100 |     100 |     100 |
----------|---------|----------|---------|---------|-------------------
ERROR: Coverage for lines (100%) does not meet global threshold (101%)
```

观看视频 [如何阅读代码覆盖报告](https://youtu.be/yVvCYtsmkZU) 以查看如何读取 HTML 覆盖报告.

### 每个光谱文件后默认摘要

默认情况下,此插件会在每个 spec 文件后显示覆盖摘要 。 您可以禁用此摘要 `cypress.json` 文件

```json
{
  "env": {
    "coverage": {
      "reportAfterEachSpec": false
    }
  }
}
```

您还可以指定每个字段后要使用的记者 :

```json
{
  "env": {
    "coverage": {
      "reportAfterEachSpec": "text"
    }
  }
}
```

默认记者为"文本摘要"

## 仪器单位测试

如果您直接测试您的应用程序代码 `specs` 并结合单元测试代码覆盖与任何端到端代码覆盖(从iframe). 您可以使用 : [巴尔-普拉金-斯坦布尔](https://github.com/istanbuljs/babel-plugin-istanbul) 举个例子.

安装插件

```
npm i -D babel-plugin-istanbul
```

准备 `.babelrc` 文件

```rc
{
  "plugins": ["istanbul"]
}
```

插入以下内容 `cypress/plugins/index.js` 要使用的文件 `.babelrc` 文件

```js
module.exports = (on, config) => {
  require('@bahmutov/cypress-code-coverage/task')(on, config)
  on(
    'file:preprocessor',
    require('@bahmutov/cypress-code-coverage/use-babelrc'),
  )
  return config
}
```

现在Spec文件的代码覆盖会与端到端的覆盖相结合.

查找仅测试单位和 JavaScript 源文件的例子,其代码覆盖范围为 [实例/单位测试-js](https://npmcn.com/package/%40bahmutov/cypress-code-coverage/examples/unit-tests-js)。 。 。 .

### 单位测试的替代品

如果无法使用 `.babelrc` 出于某种原因(可能为其他工具所使用?),尝试使用本模块中包含的浏览器变压器 `use-browserify-istanbul` 文档.

```js
module.exports = (on, config) => {
  require('@bahmutov/cypress-code-coverage/task')(on, config)
  on(
    'file:preprocessor',
    require('@bahmutov/cypress-code-coverage/use-browserify-istanbul'),
  )
  return config
}
```

## 仪器后端代码

示例 [实例/后端](https://npmcn.com/package/%40bahmutov/cypress-code-coverage/examples/backend) 文件夹.

您也可以使用您的服务器侧码并生成覆盖后端和前端码的综合覆盖报告

1.  用仪器运行服务器代码 。 最简单的方法是使用 [无](https://github.com/istanbuljs/nyc)如果正常运行 `node src/server` 然后运行乐器版本 `nyc --silent node src/server`。 。 。 .
2.  添加一个返回所收集覆盖的结束点 。 如果你使用快递,你就可以做

```js
const express = require('express')
const app = express()
require('@bahmutov/cypress-code-coverage/middleware/express')(app)
```

**提示 :** 您只能在有全局代码覆盖对象的情况下注册端点,并且可以从覆盖数字中排除中间软件代码

```js
// https://github.com/gotwarlost/istanbul/blob/master/ignoring-code-for-coverage.md
/* istanbul ignore next */
if (global.__coverage__) {
  require('@bahmutov/cypress-code-coverage/middleware/express')(app)
}
```

如果您使用 Hapi 服务器, 请自行定义端点并返回对象

```js
if (global.__coverage__) {
  require('@bahmutov/cypress-code-coverage/middleware/hapi')(server)
}
```

对于其他服务器,请自行定义端点并返回覆盖对象:

```js
if (global.__coverage__) {
  // add method "GET /__coverage__" and response with JSON
  onRequest = (response) => response.sendJSON({ coverage: global.__coverage__ })
}
```

3.  保存 API 覆盖结束点 `cypress.json` 要让插件知道从服务器接收代码覆盖数据的呼叫地点。 放进去 `env.codeCoverage` 对象 :

```json
{
  "env": {
    "codeCoverage": {
      "url": "http://localhost:3000/__coverage__"
    }
  }
}
```

这应该足够了——在测试运行结束时会要求服务器的代码覆盖,并与客户端的代码覆盖合并,生成一份综合报告.

### 仅等待后退

如果没有前端代码覆盖, 您只想要使用 Cypress 测试来收集后端代码覆盖, 设置 `expectBackendCoverageOnly: true` 内 `cypress.json` 文档。 否则Cypress抱怨它找不到前端的代码覆盖.

默认 :

![No frontend code coverage warning](https://npmcn.com/package/%40bahmutov/cypress-code-coverage/images/warning.png)

之后:

```json
{
  "env": {
    "codeCoverage": {
      "url": "http://localhost:3003/__coverage__",
      "expectBackendCoverageOnly": true
    }
  }
}
```

![Cypress knows to expect the backend code coverage only](https://npmcn.com/package/%40bahmutov/cypress-code-coverage/images/expect-backend.png)

## 自定义报表文件夹

您可以通过添加指定自定义报表文件夹 `nyc` 对象 `package.json` 文档。 例如,将报告保存到 `cypress-coverage` 文件夹, 使用 :

```json
{
  "nyc": {
    "report-dir": "cypress-coverage"
  }
}
```

## 自定义记者

您可以指定要使用的自定义覆盖记者 。 例如输出文本摘要并保存 JSON 报告 `cypress-coverage` 您的文件夹设置 `package.json` 文件夹 :

```json
{
  "nyc": {
    "report-dir": "cypress-coverage",
    "reporter": ["text", "json"]
  }
}
```

**提示 :** 查找记者名单 [这里](https://istanbul.js.org/docs/advanced/alternative-reporters/)

## 自定义 NYC 命令

有时NYC工具可能会被安装到不同的文件夹,而不是当前或父文件夹中,或者您可能想要自定义报告命令. 在这种情况下,将自定义命令放入 `package.json` 在当前文件夹中,此插件将自动使用.

```json
{
  "scripts": {
    "coverage:report": "call NYC report ..."
  }
}
```

## 类型脚本用户

TypeScript源文件如果是仪器,应该自动包含在报表中.

见 [实例/实例](https://npmcn.com/package/%40bahmutov/cypress-code-coverage/examples/ts-example), (中文(简体) ), [bahmutov/cra-ts-代码-覆盖-实例](https://github.com/bahmutov/cra-ts-code-coverage-example) 或者说 [bahmutov/cypress-angular-覆盖-实例](https://github.com/bahmutov/cypress-angular-coverage-example)。 。 。 .

## 包含代码

默认情况下,代码覆盖报告包括 _仅限_ 测试期间应用程序装入的仪器文件。 如果一些模块被动态地加载,或者被任何测试中不访问的页面加载,这些文件将不会在报表中 - 因为插件不知道它们. 您可以通过使用 `include` 列表中 `package.json` 文档。 没有计数器的文件会有0%的代码覆盖.

例如,如果您想要确保最终报告包含所有来自"src/pages"文件夹的JS文件,请在您的文件夹中设置"nyc"对象 `package.json` 文档.

```json
{
  "nyc": {
    "all": true,
    "include": "src/pages/*.js"
  }
}
```

参见示例 [实例/全部文件](https://npmcn.com/package/%40bahmutov/cypress-code-coverage/examples/all-files)

## 排除代码

可以在代码覆盖报告中排除部分代码或整个文件. 见 [伊斯坦布尔指南](https://github.com/gotwarlost/istanbul/blob/master/ignoring-code-for-coverage.md)普通案件:

### 过滤文件

使用 E2E 指定要从保存的覆盖报告中排除的文件列表 `env` 对象 `cypress.config.js` 文档.

```js
// cypress.config.js
module.exports = defineConfig({
  e2e: {
    coverage: {
      // exclude the service worker files
      exclude: ['**/src/service*.js'],
    },
  },
})
```

您可以尝试仅使用

```js
// cypress.config.js
module.exports = defineConfig({
  e2e: {
    coverage: {
      exclude: true,
    },
  },
})
```

### 不包括"else"分支

当仅在Cypress测试期间运行代码时,"else"分支就永远不会被击中. 因此,我们应当将其排除在分支覆盖范围之外:

```js
// expose "store" reference during tests
/* istanbul ignore else */
if (window.Cypress) {
  window.store = store
}
```

### 排除下一个逻辑语句

经常需要跳过声明

```js
/* istanbul ignore next */
if (global.__coverage__) {
  require('@bahmutov/cypress-code-coverage/middleware/express')(app)
}
```

或一个特定的 `switch` 大小写

```js
switch (foo) {
  case 1 /* some code */:
    break
  /* istanbul ignore next */
  case 2: // really difficult to hit from tests
    someCode()
}
```

### 不包括文件和文件夹

见 [`nyc` 配置](https://github.com/istanbuljs/nyc#common-configuration-options) 财务报告和审定财务报表 [包含和排除选项](https://github.com/istanbuljs/nyc#using-include-and-exclude-arrays)。您可以使用 `minimatch` 模式 `.nycrc` 文件或使用“nyc”对象 `package.json` 文档.

例如,如果您只想要将文件包含在 `app` 文件夹,但不包括 `app/util.js` 文件,您可以设置在您的 `package.json`

```json
{
  "nyc": {
    "include": ["app/**/*.js"],
    "exclude": ["app/util.js"]
  }
}
```

**说明:** 如果你有的话 `all: true` NYC 选项集, 此插件将检查生成的 `.nyc_output/out.json` 在生成最后报告之前。 如果 `out.json` 文件没有关于一些文件的信息,这些文件应该根据 `include` 列表,然后包含一个空的占位符,参见 [PR 208 国道](https://github.com/cypress-io/code-coverage/pull/208)。 。 。 .

另一个重要选择是 `excludeAfterRemap`。默认是虚假的,可能会让排除的文件通过。 如果你排除了文件, 和仪表器不尊重 `nyc.exclude` 设置,然后添加 `excludeAfterRemap: true` 告诉 `nyc report` 排除文档。 见 [实例/ 不包括文件](https://npmcn.com/package/%40bahmutov/cypress-code-coverage/examples/exclude-files)。 。 。 .

## 静音模式

您可以使用 : `quiet: true` 选项

```js
// cypress.config.js objects
{
  e2e: {
    env: {
      coverage: {
        // false by default
        quiet: true
      }
    }
  }
}
```

## 禁用插件

您可以通过设置环境变量来跳过客户端的代码覆盖钩 `coverage` 改为 `false`。 。 。 .

```shell
# tell Cypress to set environment variable "coverage" to false
cypress run --env coverage=false
# or pass the environment variable
CYPRESS_coverage=false cypress run
```

或设定为 `false` 输入 `cypress.json` 文件

```json
{
  "env": {
    "coverage": false
  }
}
```

如果您有覆盖设置的对象, 您仍然可以禁用它

```json
{
  "env": {
    "coverage": {
      "disable": true
    }
  }
}
```

**提示 :** 您可以使用 `disable: true` 或者说 `disabled: true`

见 [Cypress环境变量](https://on.cypress.io/environment-variables) 财务报告和审定财务报表 [支助.js](https://npmcn.com/package/%40bahmutov/cypress-code-coverage/support.js)。您可以自己尝试在不包含代码的情况下运行

```shell
# run with code coverage
npm run dev
# disable code coverage
npm run dev:no:coverage
```

## 合并覆盖面报告

在平行进行测试时, 您可以将所有覆盖文件夹下载到一个顶端文件夹, 然后合并覆盖并使用新的合并报告 `cc-merge` 命令包含在此模块中.

例如, 如果这是带有下载覆盖子文件夹的顶端文件夹 :

```
project/
  reports/
    one/
      coverage-final.json
    two/
      coverage-final.json
    three/
      coverage-final.json
```

使用此命令合并全部 `coverage-final.json` 文件

```
npx cc-merge reports
```

报道将写入 `.nyc_output` 文件夹(自动清除),报告将写入 `coverage` 文件夹.

## 链接

-   \# 顺我的路 # [测试 Swag 仓库](https://cypress.tips/courses/swag-store) 显示 e2e 和组件代码覆盖
-   \# 顺我的路 # [TDD 计算器](https://cypress.tips/courses/tdd-calculator) 以查看E2E测试覆盖的简单静态应用程序
-   读取 [Cypress 代码覆盖指南](http://on.cypress.io/code-coverage)
-   读取 [Parcel Bundler的代码覆盖](https://glebbahmutov.com/blog/code-coverage-by-parcel/) 博客文章
-   读取 [合并端到端和单位测试覆盖率](https://glebbahmutov.com/blog/combined-end-to-end-and-unit-test-coverage/) 博客文章
-   读取 [飞行时的代码覆盖](https://glebbahmutov.com/blog/code-coverage-on-the-fly/) 博客文章
-   如果您使用React, 请检查 [@ cypress/instrument- cra (英语)](https://github.com/cypress-io/instrument-cra)
-   观看视频 [Cypress 提示( T)](https://www.youtube.com/playlist?list=PLP9o9QNnQuAYYRpJzDNWpeuOVTwxmIxcI) 播放列表
-   观看视频 [99%的代码覆盖 9分钟](https://youtu.be/AgQS9Pcneto) 从还款 [bahmutov/所谓的urls-实例](https://github.com/bahmutov/called-urls-examples)

## GitHub 动作

在使用带有 GitHub 动作的插件时, 如果启用了报告, 那么每个任务摘要都会在动作摘要报告中包含当前最终百分比 .

![Summary table](https://npmcn.com/package/%40bahmutov/cypress-code-coverage/images/summary.png)

表格头的emoji取决于覆盖率

| 覆盖率(%) | 爱莫吉 |
| --- | --- |
| \>= 95 | ✅ |
| 第90条 | 🏆 |
| 页:1 | 🥇 |
| \>= 70 | 🥈 |
| \>= 60 | 🥉 |
| 第50条 | 📈 |
| 第40条 | ⚠️ |
| < 40号 | 🪫 |

## 实例

### 内部实例

我们在此寄存器中测试的全部示例 :

-   [实例/后端](https://npmcn.com/package/%40bahmutov/cypress-code-coverage/examples/backend) 只播放后端节点服务器并保存覆盖报告
-   [实例/完整](https://npmcn.com/package/%40bahmutov/cypress-code-coverage/examples/fullstack) 将后端、e2e和单位测试覆盖合并为单一报告
-   [例/全程访问前](https://npmcn.com/package/%40bahmutov/cypress-code-coverage/examples/before-all-visit) 检查密码覆盖是否有效, 当 `cy.visit` 于 `before` 钩子
-   [实例/每次访问前](https://npmcn.com/package/%40bahmutov/cypress-code-coverage/examples/before-each-visit) 检查代码覆盖度是否正确跟踪代码 `cy.visit` 在每次测试之前
-   [例/一谱.js](https://npmcn.com/package/%40bahmutov/cypress-code-coverage/examples/one-spec.js) 确认如果用户只执行单个 Cypress 测试, 覆盖范围会被正确收集和过滤
-   [实例/实例](https://npmcn.com/package/%40bahmutov/cypress-code-coverage/examples/ts-example) 将 Babel + Parcel 用于仪器并服务 TypeScript 文件
-   [实例/用户网页包](https://npmcn.com/package/%40bahmutov/cypress-code-coverage/examples/use-webpack) 显示带源地图和 Babel 的 Webpack 构建
-   [实例/单位测试-js](https://npmcn.com/package/%40bahmutov/cypress-code-coverage/examples/unit-tests-js) 只运行单位测试和报告代码覆盖(JavaScript源代码)
-   [实例/单位测试](https://npmcn.com/package/%40bahmutov/cypress-code-coverage/examples/unit-tests-ts) **无效** 仅运行单位测试和报告代码覆盖( TypeScript 源代码)

### 外部实例

查看 GitHub 主题下的实例列表 [cypress-code-coverage-实例](https://github.com/topics/cypress-code-coverage-example)

-   [cypress-io/cypress-现实世界应用](https://github.com/cypress-io/cypress-realworld-app) 是一个使用 E2E, API, 和单位测试的简单设置和运行现实世界应用程序, 实现前端和后端代码100%的编码覆盖 。 其CI编审程序还报告通过平行测试向下列地点进行的编码覆盖报告: [代码](https://codecov.io/gh/cypress-io/cypress-realworld-app)。 。 。 .
-   [cypress-io/cypress-example-todomvc-redux (英语)](https://github.com/cypress-io/cypress-example-todomvc-redux) 是一个 React / Redux 应用程序,包含100%的代码覆盖.
-   [cypress-io/cypress-example-conduit-app (英语)](https://github.com/cypress-io/cypress-example-conduit-app) 显示如何从后端和前端代码中收集覆盖信息并将其合并为单一报告。 E2E测试步骤在几个CI容器中平行运行,每个容器只保存部分测试覆盖信息. 然后一个合并的工作是把艺术品 和覆盖合并到最后报告中 以服务应用的方式发送到外部覆盖.
-   [bahmutov/编码-覆盖-webpack-dev-server](https://github.com/bahmutov/code-coverage-webpack-dev-server) 显示如何从使用 webpack-dev-server 的应用程序中收集代码覆盖.
-   [bahmutov/编码覆盖-vue-example](https://github.com/bahmutov/code-coverage-vue-example) 收集 Vue.js 单一文件组件的代码覆盖.
-   [luia/cypress-typescript-coverage-实例](https://github.com/lluia/cypress-typescript-coverage-example) 显示使用 TypeScript 的 React App 覆盖范围。 见讨论 [19号](https://github.com/cypress-io/code-coverage/issues/19)。 。 。 .
-   [bahmutov/ cypress- jest (简体中文)](https://github.com/bahmutov/cypress-and-jest) 显示如何运行 Jest 单元测试和 Cypress 单元测试,从两个测试跑道收集代码覆盖,然后生成合并报告.
-   [根陷阱/反应-红底](https://github.com/rootstrap/react-redux-base) 以现实的 Webpack 配置显示实例。 使用 `babel-plugin-istanbul` 在测试期间.
-   [bahmutov/cypress-angular-覆盖-实例](https://github.com/bahmutov/cypress-angular-coverage-example) 从 [天锁/气压-角-覆盖-实例](https://github.com/skylock/cypress-angular-coverage-example) 显示 Angular 8 + TypeScript 应用程序,并使用仪器 [伊斯坦堡仪器装载器](https://github.com/webpack-contrib/istanbul-instrumenter-loader)。 。 。 .
-   [bahmutov/测试反应](https://github.com/bahmutov/testing-react) 显示如何为使用 [CRA v3 软件](https://github.com/facebook/create-react-app) 不弹出 `react-scripts`。 。 。 .
-   [bahmutov/cra-ts-代码-覆盖-实例](https://github.com/bahmutov/cra-ts-code-coverage-example) 乐器 TypeScript React 应用在苍蝇上而不弹出 `react-scripts` 通过使用 [@ cypress/instrument- cra (英语)](https://github.com/cypress-io/instrument-cra)。 。 。 .
-   [bahmutov/下个和-cypress-实例](https://github.com/bahmutov/next-and-cypress-example) 显示如何获取后端和前端覆盖 [下一个.js](https://nextjs.org/) 项目。 用途 [中间软件/后置软件](https://npmcn.com/package/%40bahmutov/cypress-code-coverage/middleware/nextjs.js)。 。 。 .
-   [kylemh/next-ts-与-cypress-覆盖](https://github.com/kylemh/next-ts-with-cypress-coverage) 此示例项目包含 Next.js 有 TypeScript, 有仪器覆盖报告, @ testing-library/ react, 以及如何输入自定义命令的指令 .
-   [akoidan/vue-webpack 类型标记](https://github.com/akoidan/vue-webpack-typescript) 纯网络包配置有 vue + 有代码cov 报告的打字符. 这个设置使用带有TS检查器的bail-loader作为单独的线程.
-   [bahmutov/编码覆盖-子文件夹-实例](https://github.com/bahmutov/code-coverage-subfolder-example) 显示工具 `app` 使用文件夹的文件夹 `nyc instrument` 在运行 E2E 测试前作为单独的步骤
-   [巴赫穆托夫/用-cypress-包含-编码-覆盖-实例](https://github.com/bahmutov/docker-with-cypress-included-code-coverage-example) 在预安装的 Cypress 内运行测试 [cypress/包含:x.y.z](https://github.com/cypress-io/cypress-docker-images/tree/master/included) 多克图像和报告代码覆盖.
-   [bahmutov/app-in-docker-覆盖-实例](https://github.com/bahmutov/app-in-docker-coverage-example) 显示在 Docker 容器内运行的应用程序, 而 Cypress 则运行在本地机器上 。 Cypress 还是可以的 [发现源文件](https://github.com/cypress-io/code-coverage/pull/197) 在生成报告之前.
-   [bahmutov/gatsby-cypress-有编码封面](https://github.com/bahmutov/gatsby-cypress-with-code-coverage) 使用官方的Gatsby"Hello World"启动器显示代码覆盖.
-   [穆拉特克勒莫兹坎/角-游戏场](https://github.com/muratkeremozcan/angular-playground) 是Angular TypeScript的应用程序,包含组合单元和E2E覆盖.

## 移徙

### v2 为 v3

更改插件文件 `cypress/plugins/index.js`

```js
// BEFORE
module.exports = (on, config) => {
  on('task', require('@bahmutov/cypress-code-coverage/task'))
}
// AFTER
module.exports = (on, config) => {
  require('@bahmutov/cypress-code-coverage/task')(on, config)
  // IMPORTANT to return the config object
  // with the any changed environment variables
  return config
}
```

**提示 :** 我们包括 [插件( js)](https://npmcn.com/package/%40bahmutov/cypress-code-coverage/plugins.js) 在简单的情况下,您可以从代码中指向文件。 从你的 `cypress.json` 文件 :

```json
{
  "pluginsFile": "node_modules/@bahmutov/cypress-code-coverage/plugins",
  "supportFile": "node_modules/@bahmutov/cypress-code-coverage/support"
}
```

见 [实例/用户插件与支持](https://npmcn.com/package/%40bahmutov/cypress-code-coverage/examples/use-plugins-and-support)

## 调试

此插件使用 [调试](https://github.com/visionmedia/debug) 模块,从它输出额外的日志信息 [任务.js](https://npmcn.com/package/%40bahmutov/cypress-code-coverage/task.js) 文档。 这可以帮助调试出错误,同时保存代码覆盖或报告. 为了看到这些信件, 用环境变量从终端运行 Cypress `DEBUG=code-coverage`。使用 Unix 语法设置变量的示例:

```shell
$ DEBUG=code-coverage npm run dev
...
  code-coverage reset code coverage in interactive mode +0ms
  code-coverage wrote coverage file /code-coverage/.nyc_output/out.json +28ms
  code-coverage saving coverage report using command: "nyc report --report-dir ./coverage --reporter=lcov --reporter=clover --reporter=json" +3ms
```

深筑的物体有时会 `[object Object]` 数值。 您可以通过添加指定更深的深度来打印这些嵌入对象 `DEBUG_DEPTH=` 设置

```shell
$ DEBUG_DEPTH=10 DEBUG=code-coverage npm run dev
```

### 共同问题

共同问题: [在运行 Cypress 时不使用您的应用程序](https://npmcn.com/package/%40bahmutov/cypress-code-coverage/#readme-instrument-your-application)。 。 。 .

如果插件在X版本之前工作过,但在升级到Y版本后停止,请尝试 [已发行版本](https://github.com/cypress-io/code-coverage/releases) x和Y之间,看看破碎的变化在哪里.

如果您决定在此仓库中打开一个问题, 请填写所有信息 [问题模板](https://github.com/cypress-io/code-coverage/blob/master/.github/ISSUE_TEMPLATE/bug_report.md) 问。 最有可能解决的问题包括调试日志,截图和希望公共寄存器链接,这样我们可以自己尝试运行测试.

## 捐款

您可以通过运行测试对本地变化进行测试,确认代码覆盖已经被计算和保存.

```shell
# the coverage folder is deleted automatically
npm run test:ci
# now check generated coverage numbers
npx nyc report --check-coverage true --lines 80
npx nyc report --check-coverage true --lines 100 --include cypress/about.js
npx nyc report --check-coverage true --lines 100 --include cypress/unit.js
```

**提示 :** 使用情况 [检查码封面](https://github.com/bahmutov/check-code-coverage) 进行比 `nyc report --check-coverage` 允许.

### 标记

您可以在此目录中的 Markdown 文件内验证链接, 只需执行( Linux + Mac) 脚本

```shell
npm run check:markdown
```

## 许可证

本项目的许可条件如下: [麻省理工学院许可证](https://npmcn.com/package/%40bahmutov/cypress-code-coverage/LICENSE.md)它原本是从 [cypress-io/编码封面](https://github.com/cypress-io/code-coverage)。 。 。 .

## 常见问题

### @bahmutov/cypress-code-coverage 是什么？

我版本的 Cypress 代码覆盖插件

### 如何安装 @bahmutov/cypress-code-coverage？

在项目目录运行 npm install @bahmutov/cypress-code-coverage，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：cypress（\>=15\.10\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。它还提供命令行工具 cc-merge，可以用 npx cc-merge 直接运行。

### @bahmutov/cypress-code-coverage 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/bahmutov\_\_cypress-code-coverage 是否存在。

### @bahmutov/cypress-code-coverage 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @bahmutov/cypress-code-coverage 可以商用吗？

@bahmutov/cypress-code-coverage 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @bahmutov/cypress-code-coverage 的下载量有多少？

根据 npm 官方下载统计，@bahmutov/cypress-code-coverage 在 2026/10/08 – 2026/11/06 这 30 天内被下载 37,004 次，日均约 1,233 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @bahmutov/cypress-code-coverage 还在维护吗？

最新版本 3\.0\.0 发布于 2026/09/18（1 个月前）；至今共发布 24 个版本，其中过去 12 个月发布了 1 个；首次发布于 2022/03/15。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。