前言
在前端开发中，测试是不可或缺的一部分，它能够保证代码的质量和稳定性，减少出错的可能性。而在 React 开发中，测试更是必不可少的一环。本文将介绍如何使用 Enzyme 和 Jest 来测试 React 组件，并附上示例代码。
Enzyme 和 Jest 简介
Enzyme
Enzyme 是 Airbnb 开源的一款 React 组件测试工具，它提供了一套易于使用的 API，能够模拟组件的渲染和交互，让测试变得更加简单和直观。
Enzyme 提供了三种渲染方式：
- shallow rendering：只渲染当前组件，不渲染其子组件。
- mounting：完全渲染组件及其子组件，可以进行完整的交互测试。
- rendering：使用 Cheerio 将组件渲染为静态 HTML，方便测试组件的输出。
Jest
Jest 是 Facebook 开源的一款 JavaScript 测试框架，它具有速度快、配置简单、易于使用等优点。Jest 内置了断言库和 Mock 功能，能够覆盖大部分测试需求。
安装 Enzyme 和 Jest
在使用 Enzyme 和 Jest 之前，需要先进行安装。
npm install --save-dev enzyme jest enzyme-adapter-react-16
其中，enzyme 是 Enzyme 的核心库，jest 是 Jest 的核心库，enzyme-adapter-react-16 是 Enzyme 针对 React 16 的适配器。
编写测试用例
以下是一个简单的测试用例，用于测试一个 Counter 组件的自增功能。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------- ---- ------------
----------------- ----------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - ---------------- ----
----------------------------------
---
---------- -------- ----- ---- ------ -- --------- -- -- -
----- ------- - ---------------- ----
----- ------ - -----------------------
-------------------------
---------------------------------------
---
---首先，我们使用 shallow 函数来渲染 Counter 组件。然后，使用 Jest 的断言库 expect 来断言组件是否正确渲染。其中，toMatchSnapshot() 函数会将组件渲染为快照，并与之前的快照进行比较，以确保组件没有变化。
接着，我们模拟点击按钮，来测试自增功能是否正确。使用 Enzyme 的 find 函数找到按钮，并使用 simulate 函数来模拟点击事件。最后，使用 state 函数来获取组件的状态，并使用 Jest 的 toBe 函数来断言状态是否正确。
运行测试用例
在编写完测试用例之后，我们需要运行它们来检查结果。
在 package.json 文件中，添加以下代码：
{
"scripts": {
"test": "jest"
}
}然后，在命令行中运行 npm test 即可运行所有测试用例。
总结
本文介绍了如何使用 Enzyme 和 Jest 来测试 React 组件。Enzyme 提供了易于使用的 API，能够模拟组件的渲染和交互，Jest 则提供了断言库和 Mock 功能，能够覆盖大部分测试需求。使用它们，我们可以更加轻松地进行组件测试，提高代码质量和稳定性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65c885e2add4f0e0ff253787