@bahmutov/cypress-code-coverage (英语)

我的说法 Cypress 代码覆盖插件

{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}被我课程所覆盖 测试 Swag 仓库 财务报告和审定财务报表 TDD 计算器

安装

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

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

版本数

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

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

Cypress v10+ (英语)

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

// 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 文件

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

从您注册插件 cypress/plugins/index.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 工具。 幸好不难 例如,如果您已经使用 Babel 来转接,您可以添加 巴尔-普拉金-斯坦布尔 给您的 .babelrc 和飞行器.

{
  "plugins": ["istanbul"]
}

请看 实例 在下面的段落中,您可能可以找到一个匹配您状况的链接工程,在运行端到端的测试以获得代码覆盖之前,查看如何对您的应用程序的源代码进行定位.

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

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

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

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

关于苍蝇的文书

您可以通过使用 JavaScript 来规范应用程序正在装入的规格 截取器 召回电话。 简单告诉这个插件 JS 资源 coverage 环境对象 :

// 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 代码覆盖范围: 仪器编码 指南
• 看着 代码覆盖 网点
• 观看视频 Cypress 提示( T) 处理代码覆盖

App vs 单位测试

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

如果您正在从应用程序代码中直接导入到 Cypress spec 文件来测试单个函数,这被称为"单位测试", Cypress 可以为您设定此情景. 见 仪器单位测试 节.

报告

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

# 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

有必要执行 最低覆盖率 数字。 例如:

$ 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%)

观看视频 如何阅读代码覆盖报告 以查看如何读取 HTML 覆盖报告.

每个光谱文件后默认摘要

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

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

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

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

默认记者为"文本摘要"

仪器单位测试

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

安装插件

npm i -D babel-plugin-istanbul

准备 .babelrc 文件

{
  "plugins": ["istanbul"]
}

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

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。 。 。 .

单位测试的替代品

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

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
}

仪器后端代码

示例 实例/后端 文件夹.

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

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

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

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

// 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 服务器, 请自行定义端点并返回对象

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

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

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

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

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

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

仅等待后退

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

默认 :

之后:

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

自定义报表文件夹

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

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

自定义记者

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

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

提示 : 查找记者名单 这里

自定义 NYC 命令

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

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

类型脚本用户

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

见 实例/实例, (中文(简体) ), bahmutov/cra-ts-代码-覆盖-实例 或者说 bahmutov/cypress-angular-覆盖-实例。 。 。 .

包含代码

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

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

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

参见示例 实例/全部文件

排除代码

可以在代码覆盖报告中排除部分代码或整个文件. 见 伊斯坦布尔指南普通案件:

过滤文件

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

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

您可以尝试仅使用

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

不包括"else"分支

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

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

排除下一个逻辑语句

经常需要跳过声明

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

或一个特定的 switch 大小写

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

不包括文件和文件夹

见 nyc 配置 财务报告和审定财务报表 包含和排除选项。您可以使用 minimatch 模式 .nycrc 文件或使用“nyc”对象 package.json 文档.

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

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

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

另一个重要选择是 excludeAfterRemap。默认是虚假的,可能会让排除的文件通过。 如果你排除了文件, 和仪表器不尊重 nyc.exclude 设置,然后添加 excludeAfterRemap: true 告诉 nyc report 排除文档。 见 实例/ 不包括文件。 。 。 .

静音模式

您可以使用 : quiet: true 选项

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

禁用插件

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

# 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 文件

{
  "env": {
    "coverage": false
  }
}

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

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

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

见 Cypress环境变量 财务报告和审定财务报表 支助.js。您可以自己尝试在不包含代码的情况下运行

# 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 仓库 显示 e2e 和组件代码覆盖
• # 顺我的路 # TDD 计算器 以查看E2E测试覆盖的简单静态应用程序
• 读取 Cypress 代码覆盖指南
• 读取 Parcel Bundler的代码覆盖 博客文章
• 读取 合并端到端和单位测试覆盖率 博客文章
• 读取 飞行时的代码覆盖 博客文章
• 如果您使用React, 请检查 @ cypress/instrument- cra (英语)
• 观看视频 Cypress 提示( T) 播放列表
• 观看视频 99%的代码覆盖 9分钟 从还款 bahmutov/所谓的urls-实例

GitHub 动作

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

表格头的emoji取决于覆盖率

实例

内部实例

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

• 实例/后端 只播放后端节点服务器并保存覆盖报告
• 实例/完整 将后端、e2e和单位测试覆盖合并为单一报告
• 例/全程访问前 检查密码覆盖是否有效, 当 cy.visit 于 before 钩子
• 实例/每次访问前 检查代码覆盖度是否正确跟踪代码 cy.visit 在每次测试之前
• 例/一谱.js 确认如果用户只执行单个 Cypress 测试, 覆盖范围会被正确收集和过滤
• 实例/实例 将 Babel + Parcel 用于仪器并服务 TypeScript 文件
• 实例/用户网页包 显示带源地图和 Babel 的 Webpack 构建
• 实例/单位测试-js 只运行单位测试和报告代码覆盖(JavaScript源代码)
• 实例/单位测试 无效 仅运行单位测试和报告代码覆盖( TypeScript 源代码)

外部实例

查看 GitHub 主题下的实例列表 cypress-code-coverage-实例

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

移徙

v2 为 v3

更改插件文件 cypress/plugins/index.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) 在简单的情况下,您可以从代码中指向文件。 从你的 cypress.json 文件 :

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

见 实例/用户插件与支持

调试

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

$ 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= 设置

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

共同问题

共同问题: 在运行 Cypress 时不使用您的应用程序。 。 。 .

如果插件在X版本之前工作过,但在升级到Y版本后停止,请尝试 已发行版本 x和Y之间,看看破碎的变化在哪里.

如果您决定在此仓库中打开一个问题, 请填写所有信息 问题模板 问。 最有可能解决的问题包括调试日志,截图和希望公共寄存器链接,这样我们可以自己尝试运行测试.

捐款

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

# 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

提示 : 使用情况 检查码封面 进行比 nyc report --check-coverage 允许.

标记

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

npm run check:markdown

许可证

本项目的许可条件如下: 麻省理工学院许可证它原本是从 cypress-io/编码封面。 。 。 .