Jest 如何捕获测试覆盖率信息-JavaScript中文网-JavaScript教程资源分享门户

Jest 是一个非常流行的 JavaScript 测试框架，它可以帮助我们方便地编写和运行测试用例。除了普通的测试功能之外，Jest 还提供了测试覆盖率的功能，这个功能可以帮助我们更好地了解测试用例的覆盖程度，提高测试的质量。本文将介绍 Jest 的测试覆盖率功能，包括其原理和使用方法，以及如何在项目中使用它来提高测试的质量。

测试覆盖率的原理和计算方法

测试覆盖率是指测试用例对代码的覆盖程度，通常用百分比表示。对于 JavaScript 代码，测试覆盖率的计算方法有以下几种：

行覆盖率

行覆盖率是指测试用例覆盖的代码行数占总代码行数的百分比。例如，一段代码有 10 行，测试用例覆盖了其中的 8 行，那么行覆盖率就是 80%。

函数覆盖率

函数覆盖率是指测试用例覆盖的函数占总函数数的百分比。例如，一份代码包含了 20 个函数，测试用例覆盖了其中的 16 个函数，那么函数覆盖率就是 80%。

分支覆盖率

分支覆盖率是指测试用例覆盖的代码分支占总代码分支数的百分比。例如，一段代码有一个 if-else 分支和一个 switch-case 分支，测试用例覆盖了其中的 if-else 分支，那么分支覆盖率就是 50%。

Jest 利用了代码注入技术和 AST 解析技术实现了对这些覆盖率的计算。具体来说，当我们运行 Jest 测试用例时，Jest 会在运行前将代码注入覆盖率监控代码，该代码会记录测试用例运行时执行过的代码行、函数和分支，之后再将这些覆盖信息以 JSON 格式存储在内存中。测试结束后，Jest 将这些覆盖信息汇总并生成覆盖率报告，我们可以通过 Jest 的 CLI 命令或者在 CI/CD 环境中查看这些报告，了解测试用例的覆盖情况。

使用 Jest 测试覆盖率功能

要使用 Jest 的测试覆盖率功能，我们需要编写测试用例，并在测试文件的开头添加如下配置：

// jest.config.js
module.exports = {
  collectCoverage: true,
};

这个配置将指示 Jest 启用测试覆盖率功能。之后我们可以通过如下命令来运行测试并生成覆盖率报告：

$ npm run test -- --coverage

此命令会运行 Jest 测试用例，并生成一个 HTML 格式的覆盖率报告，存储在项目下的 coverage 目录中。我们可以在浏览器中打开该报告查看覆盖率信息，例如行覆盖率、函数覆盖率等。

此外，Jest 还提供了一些配置项来定制测试覆盖率的输出，包括：

coverageDirectory: 指定覆盖率报告的输出目录，默认为 coverage。
coverageReporters: 指定覆盖率报告的格式，支持 html, text, lcov 等格式。

例如，我们可以将 jest.config.js 配置为如下形式：

module.exports = {
  collectCoverage: true,
  coverageDirectory: 'coverage',
  coverageReporters: ['lcov', 'text', 'html'],
};

这样 Jest 会将覆盖率报告输出到 coverage 目录下，并生成 lcov, text, html 等格式的报告。

Jest 测试覆盖率的指导意义

测试覆盖率是评估测试质量的关键指标之一。通过测试覆盖率，我们可以了解测试用例对代码的覆盖程度，进而评估测试的质量。通常而言，我们希望测试覆盖率尽可能地高，但是并不是所有的代码都需要覆盖。例如，一些异常情况可能很难通过测试用例覆盖到，但并不影响代码的正常运行。因此，我们应该评估测试覆盖率和代码实际运行情况相结合，综合考虑测试用例的编写和覆盖。

除此之外，测试覆盖率还有如下作用：

帮助我们发现未被测试到的代码：通过覆盖率报告，我们可以了解到哪些代码行、函数或分支未被测试覆盖，进而编写更完备的测试用例。
帮助我们优化测试用例：在覆盖率报告中我们可以了解到哪些测试用例的覆盖率不够理想，我们可以针对这些用例进行优化，提高测试的质量。

示例代码

以下是一个简单的示例，用 Jest 测试覆盖率功能测试一个计算器模块的加法函数。该模块的代码如下：

// add.js
module.exports = (a, b) => a + b;

我们编写如下测试用例：

// add.test.js
const add = require('./add');

test('add function', () => {
  expect(add(1, 2)).toBe(3);
});

运行 npm run test -- --coverage 命令后，Jest 将生成如下的覆盖率报告：

------------------------------|---------|----------|---------|---------|-------------------
File                          | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
------------------------------|---------|----------|---------|---------|-------------------
All files                     |     100 |      100 |     100 |     100 |                   
 add.js                       |     100 |      100 |     100 |     100 |                   
------------------------------|---------|----------|---------|---------|-------------------

可以看到，这份代码的行覆盖率、函数覆盖率和分支覆盖率均为 100%，说明该测试用例完全覆盖了被测试的加法函数。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d6648aa941bf7134c21f87

Jest 如何捕获测试覆盖率信息