Enzyme 是一个用于测试 React 组件的 JavaScript 库，它提供了简单易用的 API 和强大的断言功能，用于测试应用程序的行为和状态。本文将介绍如何使用 Enzyme 对 React 中的兄弟组件通信进行测试，包括实例代码和测试案例。
什么是 React 兄弟组件通信？
在 React 应用程序中，组件是构建 UI 的基本单元，其通信方式是通过属性和状态进行的。兄弟组件通信指的是在同一个父组件下的两个不直接有关联的子组件之间进行通信。通常，兄弟组件之间的通信只能通过其共同的父组件进行。
Enzyme 测试步骤
下面是使用 Enzyme 测试 React 兄弟组件通信的示例代码。假设我们有两个兄弟组件：FilterList和SearchInput，其中 SearchInput 组件接收用户输入的搜索关键字并将其作为属性传递给 FilterList 组件。
------ ------ - -------- - ---- --------
-------- ------------ ------ -- -
----- ------ -------- - ---------------- ------ --------
----- ---------- - -- -- -
-- --------- ------ -----
------ ---------------- --
-------------------------------------------------
--
--
------ -
----
---------------------- -- -
--- ----------------------
---
-----
--
-
-------- ------------- -------- -- -
----- ------- --------- - -------------
----- ------------ - --- -- -
----- ----- - -----------------
----------------
----------------
--
------ ------ ----------- ------------- ----------------------- ---
-
-------- ----- -
----- -------- ---------- - -------------
----- ------------ - ----- -- -
-----------------
--
------ -
-----
------------ ----------------------- --
----------- --------------- --
------
--
-现在我们来使用 Enzyme 对这两个组件进行测试。我们将从安装和导入 Enzyme 开始。
- 安装和导入 Enzyme
要使用 Enzyme 进行测试，需要先安装它。在命令行中执行以下命令来安装 Enzyme 和相关依赖项：
--- ------- ---------- ------ ----------------------- -------------------
然后，在测试文件的开头添加以下导入语句：
------ ------ ---- --------- ------ ------- ---- ------------------------------------- ------ - -------- ----- - ---- --------- ------ --- ---- --------
在这里，我们导入了 Enzyme，Adapter 和一些 Enzyme 函数。Adapter 用于将 Enzyme 适配到 React 版本中。我们选择了适合 React v17 的 Enzyme adapter。
- 测试
FilterList组件
首先，我们将测试 FilterList 组件。FilterList 组件是无状态组件，它只从其父组件接收一个名为 filter 的属性，并将数据渲染到屏幕上。我们将使用 shallow 测试方法测试这个组件。
---------------------- -- -- -
--- --------
------------- -- -
------- - ------------------- ---------- ----
---
----------- ---------- -- -- -
------------------------------------
----------------------------------
---
----------- ----- ---------- -- -- -
------------------------------------------
----------------------------------------------------
----------------------------------------------------
---
----------- ---- --------- -- ------ ------- -- -- -
------------------ ------- ---- ---
------------------------------------------
----------------------------------------------------
----------------------------------------------------
---
---在这里，我们编写了三个测试案例：1）测试组件是否正确渲染；2）测试渲染的项目数量；3）测试组件是否按照过滤器正确进行过滤。测试用例说明如下：
- 首先，我们使用
shallow方法创建一个FilterList组件。我们将filter属性设置为 "o"。 - 在第一个测试用例中，我们测试组件是否正确地渲染成为
ul元素。我们还使用exists方法检查组件是否存在于文档中。 - 在第二个测试用例中，我们测试渲染的项目数量是否正确。我们使用
find方法查找li元素，并通过at方法获取元素的索引值并检查文本内容。 - 在第三个测试用例中，我们测试组件是否按照过滤器
filter正确进行过滤。我们使用setProps方法设置新的filter属性，然后使用find方法查找li元素，并使用at方法获取元素的索引值并检查文本内容。
现在我们已经编写了 FilterList 组件的测试用例，接下来我们将测试 SearchInput 组件。
- 测试
SearchInput组件
SearchInput 组件是一个包含输入字段的 React 组件，用户可以在输入字段中输入要搜索的文本，并将搜索文本作为属性传递给其兄弟组件 FilterList。我们将使用 mount 测试方法测试这个组件。
----------------------- -- -- -
--- --------
------------- -- -
------- - ------------------ ------------ -- --- ----
---
----------- ---------- -- -- -
------------------------------------
-------------------------------------
---
----------- -------- -------- ---------- -- -- -
----- -------- - ----------
------------------ -------- ---
---------------------------------------- -
------- - ------ ----- -
---
---------------------------------------------
---
---在这里，我们编写了两个测试用例：1）测试组件是否正确渲染为 input 元素；2）测试 SearchInput 组件是否正确调用 onSearch 回调方法。测试用例说明如下：
- 首先，我们使用
mount方法创建一个SearchInput组件。我们将onSearch属性设置为一个空函数。 - 在第一个测试用例中，我们测试组件是否正确渲染成为
input元素。我们还使用exists方法检查组件是否存在于文档中。 - 在第二个测试用例中，我们测试了组件的回调函数。我们使用
jest.fn创建一个新的onSearch回调。然后，我们使用setProps方法设置新的onSearch属性。我们使用simulate方法模拟用户输入，传递“foo”值，并确认回调被调用且传递了正确的值。
结论
在本文中，我们介绍了如何使用 Enzyme 对 React 兄弟组件通信进行测试。我们从安装和导入 Enzyme 开始，然后介绍了如何测试两个兄弟组件 - FilterList 和 SearchInput。我们使用了两种测试方法 - shallow 和 mount - 来测试不同类型的组件。这个示例提供了一个指导性的参考，旨在帮助你学习如何使用 Enzyme 进行 React 组件测试，并且编写出一个高质量的测试案例来确保你的应用程序能够发挥最佳性能。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/66f30c77e1e8e99bfaf2dae4