作为一名前端开发人员，我们不仅需要写可读可维护的代码，还需要保证代码的正确性。而对于一个 React 组件的单元测试，我们需要使用 Enzyme 这个库。
Enzyme 是什么
Enzyme 是由 Airbnb 开源的 React 测试工具。它可以方便地提供友好的测试 API，用于测试 React 组件。
Enzyme 提供了轻松访问组件的 DOM 结构和实例，以便测试组件的某些方法， simulate 具有交互的场景，以及检查组件渲染的输出。通过使用 Enzyme，我们可以更加自信地编写 React 组件。
安装和配置 Enzyme
安装 Enzyme 很简单，只需运行以下命令即可：
--- ------- ---------- ------ -----------------------
这里我们需要注意一下，需要安装适配器来驱动 Enzyme，这取决于使用的 React 版本。这里我们安装了 adapter-react-16，对应着 React v16。
Enzyme 基本适配器配置
当我们安装了 Enzyme 之后，我们需要对其进行基本配置，以便使用 Enzyme 完成我们的测试。
------ - --------- - ---- --------- ------ ------- ---- -------------------------- ----------- -------- --- --------- ---
使用 Enzyme 编写测试
接下来，我们来看一个例子，展示如何使用 Enzyme 编写一个组件测试。假设我们要测试一个简单的 React 组件：
----- -------- ------- --------------- -
------------------ -
-------------
---------- - -
------ --
--
-
------------------- -
-------------------
-------------- -- ----------------
---------- -- --------------- ------ ---- ----
-
-------- -
------ -
----
-------------------------- -- -
--- -------------------------------
---
-----
--
-
-我们可以使用 Enzyme 的 shallow 方法来测试我们的组件。
------ ----- ---- --------
------ - ------- - ---- ---------
------ -------- ---- -------------
------------------ ----------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - ----------------- ----
----------------------------------
---
---------- ---- ------- -- -- -
----- ------- - ----------------- ----
----- ----- - -
- --- -- ------ ----- -- --
- --- -- ------ ----- -- --
- --- -- ------ ----- -- -
--
------------------ ----- ---
----- -------- - ------------------------------
-------------------------------------------
----------------------- ------ -- -
---------------------------------------------
---
---
---首先我们需要导入需要使用的模块，其中包括 React、shallow 和我们要测试的组件。
接下来，我们使用 Jest 的 describe 函数来分组测试。在这个例子中，我们将测试两个用例。
第一个测试用例是检查 ItemList 是否可以渲染正确。在这里，我们使用 Enzyme 的 shallow 方法来浅渲染 ItemList 组件，并使用 toMatchSnapshot 来测试快照是否匹配。
第二个测试用例测试 ItemList 组件是否正确地显示了项目列表。我们首先设置一个项目列表，在这里我们设置了3个项目。然后，我们使用 setState 来更新 ItemList 组件的状态，并查找包含项目列表的 ul 元素。最后，我们遍历项目列表，并检查节点是否正确显示项目的值。
总结
单元测试是前端开发中不可或缺的部分。Enzyme 的引入可以大大提高我们在 React 应用程序中编写测试的效率。上面这个例子演示了如何使用 Enzyme 编写 React 组件单元测试，我们需要注意在安装和配置 Enzyme 时适配器的版本号，以及在编写测试用例时使用 shallow 和 setState 方法。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64b3101948841e9894f4733c