当我们在开发前端项目时，经常需要进行单元测试。而其中的一个重要指标就是测试覆盖率，即我们的测试用例覆盖了多少代码。
在 Jest 中，我们可以使用 --coverage 参数来生成测试覆盖率报告。但是默认情况下，Jest 的测试覆盖率报告只会显示出覆盖率的总数，而无法看到每个文件的具体覆盖情况，这样对我们的单元测试优化和开发效率提升都不太友好。
因此，我们可以使用 jest-coverage-ratchet 这个 npm 包来改善测试覆盖率报告。在本篇文章中，我们将深入探讨该包的使用方法和详细说明。
安装
首先，我们需要安装 jest-coverage-ratchet。使用以下命令进行安装：
npm install --save-dev jest-coverage-ratchet
配置 Jest
安装完成后，我们需要在 Jest 配置文件中引入 jest-coverage-ratchet。在 jest.config.js 文件中加入以下代码：
-- -------------------- ---- -------
-------------- - -
-- --- -----
------------------ -------- ------- ------- ----------
------------------ --------- - ------------ ---- ----
---------- -
----------
------------------------- - ------------------------ ---- --
-
-- --- -----
--这里我们指定了四种不同的报告方式：json，lcov，text 和 clover。
其中，lcov 是最重要的一个，它可以生成代码覆盖率的 HTML 报告。在这里，我们配置了一个 projectRoot，这个配置项通常放在仓库根目录。这是为了在将来我们要使用 CI 系统自动运行测试时可以将 HTML 报告上传到 Codecov 或者 Coveralls。
这里还可以添加其他自定义的报告方式，比如 Jest HTML Reporter，其可以生成更加友好的 HTML 报告。具体可以参考 Jest 的官方文档。
在 reporters 中，我们添加了 jest-coverage-ratchet。这个包会将测试覆盖率的每个文件的覆盖情况生成一个单独的 HTML 报告。
注意，此处 ignoreCoverageWhenEmpty 的值为 true。这个配置项可以忽略全局覆盖率和某些文件的覆盖率的输出，提高测试报告的可读性。
运行测试
完成配置后，我们可以使用以下命令启动单元测试：
npm run test:coverage
在这个命令中，我们使用了 jest 的 --coverage 参数，它会生成一个覆盖率后的 HTML 报告。同时，我们还会使用 jest-coverage-ratchet 生成每个文件的 HTML 报告。
关于测试命令，在 package.json 中通常这样配置：
{
"scripts": {
"test": "jest",
"test:coverage": "npm test -- --coverage"
}
}这里的 test:coverage 命令会在执行 test 命令时添加运行参数 --coverage。
示例代码
在此提供一个示例代码，大家可以根据需要进行修改：
// example.test.js
const example = require("./example");
describe("example", () => {
it("should return 1", () => {
expect(example()).toEqual(1);
});
});在运行以上代码后生成的测试报告中，可以看到如下局部覆盖率的单独 HTML 报告：
总结
jest-coverage-ratchet 为我们提供了更加详细和深入的单元测试覆盖率报告，可以帮助我们更好地进行单元测试优化和提升开发效率。本篇文章介绍了该包的使用方法，希望对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055bdd81e8991b448d9854