在开发前端应用程序时，测试是一个非常重要的环节。使用 Enzyme 进行测试可以有效地检测组件的行为和输出，但是如何进行代码覆盖率检测呢？本文将介绍如何在 Enzyme 中支持代码覆盖率检测。
什么是代码覆盖率检测
代码覆盖率指测试用例能够覆盖源代码中多少部分。当我们运行测试用例时，代码覆盖率工具可以帮助我们判断我们的测试用例是否覆盖了所有的代码，以此来帮助我们找到没有测试到的代码并进行测试，进而完善代码质量。
如何支持代码覆盖率检测
Enzyme 在进行组件测试时通常需要和 Jest、Mocha 或其他测试运行器一起使用。因此，在支持 Enzyme 进行代码覆盖率检测之前，需要先了解 Jest 或 Mocha 等测试运行器的代码覆盖率配置。
Jest
Jest 是目前 React 生态中最流行的测试运行器之一，具有自带的代码覆盖率工具。在 Jest 中支持代码覆盖率检测非常简单，只需配置 collectCoverage 和 coverageDirectory 两个参数即可。
在 package.json 中配置如下参数：
{
"collectCoverage": true,
"coverageDirectory": "coverage"
}在运行测试时，Jest 会自动将测试转换为代码覆盖报告，报告会储存在 coverage/ 目录下。这个报告包含了测试覆盖的文件和代码，以及未被覆盖的行和函数等统计信息。
Mocha
与 Jest 不同，Mocha 并没有自带的代码覆盖率工具，而需要通过第三方库来支持代码覆盖率检测。常用的第三方库包括 Istanbul、BlanketJS 等。
在使用 Istanbul 时，在 package.json 中配置如下参数：
{
"scripts": {
"test": "istanbul cover _mocha"
}
}这将会运行带有 Istanbul 的 Mocha 测试，并生成代码覆盖率报告。
在 Enzyme 中支持代码覆盖率检测
支持代码覆盖率检测后，如何在 Enzyme 中使用呢？我们可以使用 Jest 或 Mocha 与 Enzyme 一起使用，以生成代码覆盖率报告。
首先在我们的测试文件中引入代码覆盖率工具，例如在 Jest 中，我们可以这样引入 react-scripts 中自带的覆盖率工具：
// MyComponent.test.js
import { shallow } from 'enzyme';
import React from 'react';
import MyComponent from './MyComponent';
import 'react-scripts/scripts/utils/createJestConfig';这样，我们就可以在运行测试时自动启动代码覆盖率检测，生成一个覆盖率报告。
总结
代码覆盖率检测是测试用例的必要组成部分，它可以帮助我们更好地检测我们的测试用例是否覆盖了所有的代码，以此来更完善我们的代码质量。在使用 Enzyme 进行测试时，我们可以通过配置 Jest 或 Mocha 的代码覆盖率工具来支持代码覆盖率检测，并在测试文件中引入之，以此来生成代码覆盖率报告。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647f0aed48841e9894ebbaa2