在前端开发中，测试是至关重要的一环。利用测试框架可以帮助开发者保证代码的正确性和稳定性。而 Jest 就是一个被广泛应用于前端开发中的测试框架，它提供了丰富的测试工具和易于使用的 API。
其中一个比较重要的功能是测试代码的覆盖率（Coverage）。代码覆盖率能够帮助开发者评估测试用例对代码质量的覆盖程度，进而对代码进行优化。本文将详细介绍 Jest 测试框架的 coverage 统计功能，并通过示例代码进行说明。
Jest 测试框架的 coverage 统计
在 Jest 中，统计代码覆盖率需要进行如下操作：
- 安装 Jest
npm install jest --save-dev
- 配置 Jest
// package.json
{
"scripts": {
"test": "jest --coverage"
}
}- 运行测试并查看 coverage
npm test
执行 npm test 命令后，Jest 会执行测试并生成一个覆盖率报告，报告的类型可以是 HTML 或者 JSON 格式。默认情况下，报告会生成在 coverage/ 目录下。
覆盖率报告
在覆盖率报告中，有如下几个重要的指标：
- Statements：代码行数 Coverage 指标
- Branches：分支 Coverage 指标
- Functions：函数 Coverage 指标
- Lines：行 Coverage 指标
其中，Statement 比较基础，它表示被测试的代码在运行时有多少能被覆盖到。而 Branches 更加严格，它还考虑了代码判断分支，比如 if-else 语句。Functions 和 Lines 都是针对函数和行的覆盖情况统计。
在覆盖率报告中，每一个被测试的代码组件，都有这些指标的具体覆盖情况。
下面是一个测试覆盖率报告的截图。
对于每个文件，我们可以看到其中所有语句的执行次数，以及它们的状态（是成功执行还是产生了异常）。此外，还可以查看哪些语句被执行了多少次，哪些没被执行过。
示例代码
下面是一个实际的测试覆盖率示例代码，它是一个加法函数，在这之前，我们需要新建一个 sum.js 文件：
function sum(a, b) {
return a + b;
}
module.exports = sum;接下来我们使用 Jest 进行测试，新建一个 sum.test.js 文件：
const sum = require('./sum');
test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3);
});在 package.json 文件中添加如下命令：
// package.json
"scripts": {
"test": "jest --coverage"
}运行 npm test 命令，此时就会在控制台上生成测试覆盖率报告，输出如下：
-- -------------------- ---- ------- ---- ------------- - ---- - - - -- ----- - ----- --------------------------------------------------------------------------------------- ---- - - ----- - - ------ - - ----- - - ----- - --------- ---- -- - --------------------------------------------------------------------------------------- --- ----- - --- - --- - --- - --- - - ------ - --- - --- - --- - --- - - ---------------------------------------------------------------------------------------
从以上测试结果可以看出，在 sum.js 文件中，所有代码都被覆盖到。
总结
Jest 是一个功能强大的测试框架，通过使用 Jest 和统计代码覆盖率，可以帮助开发者改善代码质量，构建更可靠的软件。在实际的工作中，希望各个前端工程师能够充分利用 Jest 的功能，为自己的前端开发项目贡献更加出色的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/664f0ce0d3423812e4ff7a65