Jest 是一个流行的 JavaScript 测试框架，使用它可以轻松地编写单元测试和集成测试。Jest 还提供了很多附加功能使得它变成了功能完备且易于使用的工具。其中之一就是生成 HTML 格式的测试覆盖率报告。
本文将介绍如何使用 Jest 生成 HTML 格式的测试覆盖率报告，并将深入探讨相关的概念和学习以及指导意义。我们将使用一个示例项目来说明这个过程。
安装 Jest
安装 Jest 可以通过以下方法：
npm install --save-dev jest
也可以通过 yarn：
yarn add --dev jest
编写测试用例
在开始生成覆盖率报告之前，我们需要先编写一些测试用例。为此，我们创建一个名为 sum.js 的文件，内容如下所示：
function sum(a, b) {
return a + b;
}
module.exports = sum然后，在同一目录下创建一个名为 sum.test.js 的文件，内容如下所示：
const sum = require('./sum');
test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3);
});这是一个简单的测试用例，它测试了 sum 函数是否返回正确的结果。
运行测试
在编写了测试用例之后，我们需要运行它们来确保它们都是正确的。为此，我们可以使用 Jest 的命令行工具：
npx jest
或者
yarn test
如果一切正常的话，你应该会看到类似于以下输出：
PASS ./sum.test.js √ adds 1 + 2 to equal 3 (3 ms) Test Suites: 1 passed, 1 total Tests: 1 passed, 1 total Snapshots: 0 total Time: 1.267 s Ran all test suites.
这表明我们编写的唯一一个测试用例已经通过了。
生成覆盖率报告
现在我们已经编写和运行完测试用例了，我们就可以开始生成覆盖率报告了。为此，我们还需要安装 jest-html-reporter 包，以便将结果呈现为 HTML 格式的报告。可以通过以下方法安装：
npm install --save-dev jest-html-reporter
或者
yarn add --dev jest-html-reporter
接下来，在项目根目录下创建一个名为 jest.config.js 的文件，并添加以下内容：
module.exports = {
testResultsProcessor: "jest-html-reporters",
coverageReporters: ["html"],
};这将告诉 Jest 将测试结果处理器设置为 jest-html-reporters，并且将测试覆盖率报告格式设置为 HTML 格式。
最后，运行以下命令以生成测试覆盖率报告：
npx jest --coverage
或者
yarn test --coverage
这将生成一个名为 coverage 的目录，在该目录下会有一个名为 index.html 的 HTML 文件。打开它，你就可以看到测试覆盖率的详细信息，包括每个文件的行覆盖率、函数覆盖率和分支覆盖率等。
结论
在本文中，我们介绍了如何使用 Jest 生成 HTML 格式的测试覆盖率报告。我们从安装 Jest 开始，通过编写测试用例并运行测试来说明了生成报告的整个过程。希望本文能够帮助读者更好地理解 Jest，并掌握使用代码覆盖率工具
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6729bbad2e7021665e25771f