前言
在开发复杂的 React 应用时，我们往往需要进行 TDD（Test-driven Development，测试驱动开发）来保证代码质量和稳定性。而 Enzyme 是一个非常优秀的 React 组件测试工具，它可以让我们轻松地编写可靠的单元测试和集成测试。
本文将从零开始，手把手教你使用 Enzyme 进行 React 组件的 TDD 开发。我们会详细讲解 Enzyme 的基本使用方法，并附上实际的代码示例。
准备工作
在开始本文之前，请确保你已经具备以下知识：
- React 的基础知识
- Jest 的基础知识
如果你对以上知识还不熟悉，可以先学习一下 React 官方文档 和 Jest 官方文档。
接下来，我们需要安装 Enzyme 和 Enzyme Adapter：
--- - ---------- ------ -----------------------
其中， enzyme-adapter-react-16 需要替换成你当前使用的 React 版本的适配器。
Enzyme 基础
浅渲染（Shallow rendering）
首先，我们来了解一下 Enzyme 的浅渲染功能。所谓浅渲染，就是只渲染当前组件，而不会递归渲染子组件。
我们可以使用 shallow 方法来进行浅渲染：
------ - ------- - ---- --------- ------ ----------- ---- ---------------- ------------- ----------- -- -- - ----- ------- - -------------------- ---- ---------------------------------- ---
上面的代码中，MyComponent 是需要进行测试的组件。我们使用 shallow 方法对其进行浅渲染，并将结果保存在 wrapper 变量中。接着，我们使用 toMatchSnapshot 方法对结果进行快照测试。
完整渲染（Full rendering）
与浅渲染相对应的是完整渲染，它会递归渲染子组件。我们可以使用 mount 方法进行完整渲染：
------ - ----- - ---- --------- ------ ----------- ---- ---------------- ------------- ----------- -- -- - ----- ------- - ------------------ ---- ---------------------------------- ---
与浅渲染的测试用例类似，我们同样使用 toMatchSnapshot 方法进行快照测试。
查找节点（Finding nodes）
在测试过程中，我们需要查找组件中的节点，并对它们进行断言。Enzyme 提供了一系列查找节点的方法，例如：
find(selector)：在当前组件树中查找所有匹配selector的节点。at(index)：选择当前集合中第index个元素。first()：选择当前集合的第一个元素。last()：选择当前集合的最后一个元素。closest(selector)：查找当前集合中最接近selector的祖先元素。children([selector])：选择当前集合中所有儿子节点。
我们来看一个例子：
------ - ------- - ---- --------- ------ ----------- ---- ---------------- ------------ ------ - ---- -- ------- -- -- - ----- ----- - ------- ------ ------- ----- ------- - -------------------- ------------- ---- --------------------------------------------------------- ------------------------------------------------------------- ---
上面的代码中，我们测试了 MyComponent 组件是否正确渲染了名为 item 的节点。我们使用 find 方法查找了所有的 item 节点，然后使用 toHaveLength 方法断言其数量是否与 items 数组的长度相等。接着，我们使用 at 方法选择了第一个节点，并断言其内容是否与 items[0] 相等。
模拟用户操作（Simulating user events）
在进行 TDD 开发时，我们需要模拟用户操作，例如点击、输入等等。Enzyme 提供了一系列模拟用户操作的方法，例如：
simulate(event[, ...args])：模拟触发event事件。keyDown(key[, options])：模拟按下某个键。keyUp(key[, options])：模拟松开某个键。change([event])：模拟输入框值的变化。click([event])：模拟点击事件。
我们来看一个例子：
------ - ----- - ---- --------- ------ ----------- ---- ---------------- ------------ ---- ------- ---- ------ -- --------- -- -- - ----- ------- - ---------- ----- ------- - ------------------ ----------------- ---- ----- ------ - ----------------------- ------------------------- ----------------------------------- ---
上面的代码中，我们测试了当按钮被点击时，是否会调用 onClick 回调函数。我们使用 simulate 方法模拟点击事件，并使用 toHaveBeenCalled 方法进行断言。
示例代码
最后，让我们来看一个完整的示例代码。我们将测试一个名为 Counter 的计数器组件，它有一个 count 属性和一个 onClick 回调函数。
------ - ------- - ---- ---------
------ ------- ---- -------------
------------------- -- -- -
----------- ----------- -- -- -
----- ------- - ---------------- --------- ------------------- ----
----------------------------------
---
---------- ------- --- ------- ------- -- -- -
----- ----- - --
----- ------- - ---------------- ------------- ------------------- ----
----------------------------------------------------- -----------
---
---------- ---- ------- ---- ------ -- --------- -- -- -
----- ------- - ----------
----- ------- - ---------------- --------- ----------------- ----
----- ------ - -----------------------
-------------------------
-----------------------------------
---
---上面的代码中，我们使用了 Enzyme 和 Jest 编写了三个测试用例，分别测试了 Counter 组件的渲染、计数器显示和按钮点击事件。如果你不熟悉 Jest 的用法，可以查看 Jest 官方文档。
总结
本文介绍了 Enzyme 的基本使用方法，并给出了实际的代码示例。使用 Enzyme 可以让我们更加方便地编写 React 组件的测试用例，从而提高代码质量和稳定性。希望本文可以对你有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/652b4f9f7d4982a6ebd47eac