在 React 开发中，我们经常需要进行组件的交互测试，以确保组件的行为符合预期。而 Enzyme 是一个在 React 开发中使用广泛的测试工具，它可以帮助我们轻松地实现组件的交互测试。
本文将介绍如何使用 Enzyme 实现 React 组件的交互测试，并提供一些示例代码帮助读者更好地理解和学习。同时，我们还将深入探讨一些与 Enzyme 相关的技术和概念，帮助读者更好地理解和掌握这个工具。
Enzyme 简介
Enzyme 是由 Airbnb 团队开发的一个用于 React 组件测试的 JavaScript 工具库。它的主要作用是提供一些工具函数，帮助开发者实现对 React 组件进行测试。Enzyme 可以在浅层次下操作 React 组件，提供了对组件的各种属性和状态进行测试的功能。
Enzyme 的核心是三个独立的 API：Shallow，Mount 和 Render。其中，Shallow API 允许我们在一个组件被渲染的时候只深入到当前组件的层次结构中，而不考虑组件的子组件；Mount API 允许我们完全渲染一个组件以及所有子组件并允许我们完全操作它们，即启用了组件的生命周期函数；而 Render API 能够生成一个静态 HTML 内容，以便我们进行快照测试。
接下来，我们将通过一个实例来介绍如何使用 Enzyme 实现 React 组件的交互测试。
假设我们需要编写一个 TodoList 组件，它将渲染一个待办事项列表，并且用户可以通过输入框添加新的待办事项。其中，我们需要测试以下功能：
- 用户可以正确添加待办事项；
- 待办事项列表中的待办事项数量应该与实际添加的数量相等；
- 点击待办事项应该能够正确地将其从待办事项列表中移除。
以下是 TodoList 组件实现的示例代码：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
----- -------- - -- -- -
----- ---------- ------------ - -------------
----- --------- ----------- - -------------
----- ----------------- - ----- -- -------------------------------
----- ------------ - ----- -- -
-----------------------
------------------------- ----------
---------------
--
----- ---------------- - ----- -- -
----- ----------- - ----------------------- ---------- -- ----- --- -----------
-------------------------
--
------ -
-----
-------- ---------
----- ------------------------
------ ----------- --------------- ---------------------------- --
------- --------------------------
-------
----
-------------------- ------ -- -
--- ----------- ----------- -- -------------------------
------
-----
---
-----
--------- -- ------ ---------------------
------
--
--
------ ------- ---------在上述组件中，我们使用 useState Hooks 管理了待办事项列表(todoList)和新的待办事项(newTodo)。通过事件处理函数(handleInputChange 和 handleSubmit)更新相应的状态。同时，我们还实现了一个 handleRemoveTodo 函数来处理待办事项的移除。最后，我们将待办事项渲染为一个无序列表。
接下来，我们将使用 Enzyme 来针对上述三个测试需求实现相应的测试用例。为了使代码更加清晰易懂，我们将分别使用 Shallow，Mount，Render API 来实现下面的测试用例。
测试需求一：用户可以正确添加待办事项
首先，我们需要测试用户能够正确地添加待办事项。
使用 Shallow API：
-- -------------------- ---- -------
------ - ------- - ---- ---------
------ -------- ---- -------------
------------------- ---- -- -- -
---------- ----- ----- -- --- --- ---- ------- -- -- -
----- ------- - ----------------- ----
----- ----- - ------------------------------
------------------------ - ------- - ------ ------ ------ - ---
----------------------------------------
--------------------------------------------------- --------
---
---使用 Mount API：
-- -------------------- ---- -------
------ - ----- - ---- ---------
------ -------- ---- -------------
------------------- ---- -- -- -
---------- ----- ----- -- --- --- ---- ------- -- -- -
----- ------- - --------------- ----
----- ----- - ------------------------------
------------------------ - ------- - ------ ------ ------ - ---
----------------------------------------
--------------------------------------------------- --------
---
---使用 Render API：
-- -------------------- ---- -------
------ - ------ - ---- ---------
------ -------- ---- -------------
------------------- ---- -- -- -
---------- ----- ----- -- --- --- ---- ------- -- -- -
----- ------- - ---------------- ----
----- ----- - ------------------------------
---------------- --------
------------------------------
--------------------------------------------------- --------
---
---在测试代码中，我们分别使用了 Shallow，Mount，Render API 来实现测试用例。我们先找到表单中的输入框(input)，然后使用 simulate 函数模拟用户输入(Learn React)，最后再模拟用户点击提交按钮。在这个例子里，我们采用了不同的方式触发用户事件，要注意 API 返回对象类型不同，也会产生效果上的不同。 最后，我们根据预期结果对结果进行断言。
测试需求二：待办事项列表中的待办事项数量应该与实际添加的数量相等
接下来，我们需要测试待办事项列表中的待办事项数量应该与实际添加的数量相等。
使用 Shallow API：
-- -------------------- ---- -------
------ - ------- - ---- ---------
------ -------- ---- -------------
------------------- ---- -- -- -
---------- ------- --- ------- ------ -- ---- ------- -- -- -
----- ------- - ----------------- ----
----- ----- - ------------------------------
------------------------ - ------- - ------ ------ ------ - ---
----------------------------------------
--------------------------------------------- -- ------ ----
---
---使用 Mount API：
-- -------------------- ---- -------
------ - ----- - ---- ---------
------ -------- ---- -------------
------------------- ---- -- -- -
---------- ------- --- ------- ------ -- ---- ------- -- -- -
----- ------- - --------------- ----
----- ----- - ------------------------------
------------------------ - ------- - ------ ------ ------ - ---
----------------------------------------
--------------------------------------------- -- ------ ----
---
---使用 Render API：
-- -------------------- ---- -------
------ - ------ - ---- ---------
------ -------- ---- -------------
------------------- ---- -- -- -
---------- ------- --- ------- ------ -- ---- ------- -- -- -
----- ------- - ---------------- ----
----- ----- - ------------------------------
---------------- --------
------------------------------
--------------------------------------------- -- ------ ----
---
---与上一个测试用例类似，我们同样先模拟用户添加一个待办事项，然后断言待办事项列表中的待办事项数量与实际添加的数量相等。
测试需求三：点击待办事项应该能够正确地将其从待办事项列表中移除
最后，我们需要测试点击待办事项应该能够正确地将其从待办事项列表中移除。
使用 Shallow API：
-- -------------------- ---- -------
------ - ------- - ---- ---------
------ -------- ---- -------------
------------------- ---- -- -- -
---------- ----- ----- -- ------ ---- ------- -- -- -
----- ------- - ----------------- ----
----- ----- - ------------------------------
------------------------ - ------- - ------ ------ ------ - ---
----------------------------------------
----- -------- - -------------------------
---------------------------
-------------------------------------------
---
---使用 Mount API：
-- -------------------- ---- -------
------ - ----- - ---- ---------
------ -------- ---- -------------
------------------- ---- -- -- -
---------- ----- ----- -- ------ ---- ------- -- -- -
----- ------- - --------------- ----
----- ----- - ------------------------------
------------------------ - ------- - ------ ------ ------ - ---
----------------------------------------
----- -------- - -------------------------
---------------------------
-------------------------------------------
---
---使用 Render API：
-- -------------------- ---- -------
------ - ------ - ---- ---------
------ -------- ---- -------------
------------------- ---- -- -- -
---------- ----- ----- -- ------ ---- ------- -- -- -
----- ------- - ---------------- ----
----- ----- - ------------------------------
---------------- --------
------------------------------
----- -------- - -------------------------
-----------------
-------------------------------------------
---
---与前面的测试用例类似，我们先添加了一个测试待办事项，然后模拟用户点击待办事项，随后断言待办事项列表中的待办事项数量已经为0。
总结
本文通过一个实例演示了如何使用 Enzyme 实现 React 组件的交互测试，并介绍了 Enzyme 的相关技术和概念。通过这些例子，我们可以深入了解 Enzyme 的用法和特点，以及在我们的 React 开发过程中如何更好地使用它来提高代码质量和开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64944b0848841e98941c7d06