在前端开发中，Code Coverage 是一个重要的指标，它可以测量代码库在测试过程中被覆盖的程度。在 Jest 中，我们可以轻松地进行 Code Coverage 的配置和使用，本文将会详细介绍如何在 Jest 中进行 Code Coverage 的操作。
安装 Jest
首先，我们需要在项目中安装 Jest：
npm install jest --save-dev
配置 Jest
在项目根目录下，创建一个 jest.config.js 文件。在文件中，我们需要配置以下属性：
module.exports = {
collectCoverage: true,
collectCoverageFrom: ["<rootDir>/src/**/*.js"],
coverageReporters: ["json", "lcov", "text", "html"],
};collectCoverage：开启 Code Coverage 功能；collectCoverageFrom：包含需要覆盖测试的文件；coverageReporters：指定 Code Coverage 的输出格式。
运行测试
配置完成后，我们可以运行 Jest 的测试：
npm run test
此时，Jest 将在控制台输出测试结果和 Code Coverage 报告，并且生成 HTML 报告。
实践示例
以下是一个对于一个 math.js 文件的测试，我们可以看到该文件中的所有函数被覆盖测试了：
-- -------------------- ---- ------- -- ------- ---- -------- ------ -- - ------ - - -- - -------- ----------- -- - ------ - - -- - -------------- - - ---- --------- --
-- -------------------- ---- ------- -- ------------ ---- ----- ---- - --------------------- ---------- - - - -- ----- --- -- -- - ------------------ ------------ --- ---------------- - - - -- ----- --- -- -- - ----------------------- ------------ ---
此时，我们可以在控制台看到以下输出：
-- -------------------- ---- ------- - --- --- ---- - ------------------------ ---- - ---- ---- -------------- - ---- - - - -- ----- - ----- - ---------- - - - -- ----- - ----- --------------------------------------------------------------------------------------- ---- - - ----- - - ------ - - ----- - - ----- - --------- ---- -- --------------------------------------------------------------------------------------- --- ----- - --- - --- - --- - --- - ------- - --- - --- - --- - --- - ---------------------------------------------------------------------------------------
此处的输出中，所有文件的代码覆盖率都达到了 100%。
结论
Code Coverage 是一个重要的前端开发指标，Jest 提供了一个快速且简单的方法用于生成和分析测试代码的覆盖率。通过本文引导，相信您可以快速掌握如何在 Jest 中进行 Code Coverage。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67189f49ad1e889fe22cde6e