介绍
在 React 应用中进行单元测试是一个非常重要的环节，其中一个核心的工具就是 Enzyme。
Enzyme 是用于 React 应用的 JavaScript 测试实用程序库，它被设计用于与 Jest, Mocha, 或 Chai 等测试框架和测试库一起使用，具有易于使用和能够快速测试 React 元素的特点。
然而，在测试 React 16 及以上版本时，我们需要使用 React 16 版本的适配器，而 Enzyme 并未原生支持 React 16 版本的适配器，因此我们需要使用 npm 包 enzyme-react-16-adapter-setup 安装 React 16 版本的适配器以便于进行测试。
本文将介绍如何安装、配置和使用 enzyme-react-16-adapter-setup。
安装
如果您使用 npm 包管理器，您可以通过运行以下命令来安装 enzyme-react-16-adapter-setup：
npm install --save-dev enzyme enzyme-react-16-adapter enzyme-react-16-adapter-setup
接着，您需要在您的测试文件中导入和配置 enzyme-react-16-adapter-setup。
配置
为了配置 enzyme-react-16-adapter-setup，我们将创建一个设置文件在项目的根目录下。
在项目的根目录下创建一个名为
jest.setup.js的文件。在
jest.setup.js文件中导入所需的包并告诉 Enzyme 使用 React 16 适配器：
import { configure } from 'enzyme';
import Adapter from 'enzyme-react-16-adapter';
configure({ adapter: new Adapter() });- 更新 Jest 配置文件
package.json中的"jest"属性。将"setupFilesAfterEnv"添加为数组，使其指向刚刚创建的设置文件：
"jest": {
"setupFilesAfterEnv": ["./jest.setup.js"]
}使用
一旦我们成功配置了 enzyme-react-16-adapter-setup，我们现在就可以在我们的测试代码中使用 Enzyme 了：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - -------------------- ----
----------------------------------
---
---在上面的代码中，我们导入 shallow 进行快速而简单的测试，然后用它来呈现 MyComponent 并使用 toMatchSnapshot() 方法检查组件树是否与之前快照匹配。
总结
到此，我们已经介绍了如何安装、配置和使用 enzyme-react-16-adapter-setup，以便于在测试 React 16 及以上版本的组件时使用 Enzyme。此外，本文还演示了如何使用 shallow 和 toMatchSnapshot() 方法来测试一个 React 组件，以供读者参考和学习。
尽管在测试过程中使用 Enzyme 会缩短测试时间和增加测试的可读性和可维护性，但我们需要注意，每一种测试工具都有其自身的限制和缺点，不适用于所有场景，我们需要权衡利弊再选用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562e881e8991b448e0926