React是目前非常流行的前端框架之一，但是在进行开发时，我们常常需要对我们编写的组件进行测试。Enzyme是一个能够帮助我们测试React组件的工具库，它提供了一些API能够模拟React组件的渲染输出并方便我们进行查找、交互和断言测试。在本文中，我们将向您介绍如何使用Enzyme进行React组件的单元测试。
安装Enzyme
在进行 Enzyme 的单元测试之前，需要先行安装 Enzyme。可以使用以下命令安装 Enzyme：
--- ------- ---------- ------ -----------------------
或者使用 yarn 安装：
---- --- ------ ----------------------- -----
Enzyme的适配器需要与您使用的React主版本的版本匹配，例如使用React 16则需要安装“enzyme-adapter-react-16”。
Enzyme的三种浅层渲染实现
在进行React组件的单元测试时，会有两种测试方式可选，一种是浅层渲染，一种是深度渲染。在本文中，我们将介绍浅层渲染的实现方式，浅层渲染包含三种实现方式：
- **shallow()**：执行一次只渲染组件的第一层，不会对子组件进行渲染。
- **mount()**：执行完整的 DOM 渲染，并返回在 DOM 树中的 React 组件的实例。mount() 具有渲染子组件的功能，但是该过程更慢，并且需要大量的内存。
- **render()**：将组件渲染为静态HTML，并使用Cheerio分析结果。
在本文中，我们将使用 shallow() 的浅层渲染方式。
浅层渲染的代码实现
我们将以一个简单的登录表单组件为例子来展示如何使用Enzyme进行单元测试。
------ ----- ---- --------
----- --------- ------- --------------- -
------------------ -
-------------
---------- - -
--------- ---
--------- ---
--
-
------------ - ------- -- -
---------------
-------------------- -------------------
---
-
------------ - ------- -- -
-----------------------
----- - --------- -------- - - -----------
----------------------------- ----------
-
-------- -
------ -
----- -----------------------------
------ ------------------------------------
------ ----------- --------------- ------------- --------------------------- ---------------------------- --
------ ------------------------------------
------ --------------- --------------- ------------- --------------------------- ---------------------------- --
------- ----------------------------
-------
--
-
-
------ ------- ----------如上所示，该组件包括两个文本框和一个提交按钮，用户可以在用户名和密码文本框中输入信息，然后提交该表单。现在，我们将使用Enzyme测试该组件的交互和状态。
------ ----- ---- --------
------ - ------- - ---- ---------
------ --------- ---- --------------
--------------------- -- -- -
------------ ------- ----- -- -------- -- -- -
----- ------- - ------------------ --- - ------------------------ ---- ---
-- ----------------------
----- ------------- - ----------------------------
-------------------------------- - ------- - ----- ----------- ------ ---------- - ---
-- ---------------------
----- ------------- - ----------------------------
-------------------------------- - ------- - ----- ----------- ------ ---------- - ---
-- ---------
------------------------------------------------------
------------------------------------------------------
---
--------- -------- ---- ---- -- ----------- -- -- -
-- --------
----- -------- - ----------
-- -------------------------
----- ------- - ------------------ ------------------- ----
----- ---- - ---------------------
-- --------
----------------------- - --------------- -- -- -- ---
-- -----------------
------------------------------------
---
---在上述测试代码中，我们首先需要使用shallow()函数，该函数将测试组件的浅层渲染。然后，我们可以使用find()方法来找到组件中的元素，在同一行时可以使用at()来获取元素的位置，该位置从0开始。接着，使用simulate()方法来模拟用户行为，这里我们模拟表单中的文本框输入以及点击提交按钮的行为。最后，我们可以使用 expect() 方法来进行断言测试，例如测试组件的状态是否被更新，测试 form.submit() 调用 onSubmit 函数是否被执行。
结论
Enzyme是一个非常实用的工具库，它提供了一系列API能够帮助您测试React组件的渲染输出以及相应的交互行为，同时使得测试变得简单高效。当您进行React组件单元测试时，可以考虑使用Enzyme的浅层渲染来测试组件的交互和状态，有助于您更清晰地了解React组件的行为表现，保障代码质量。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672ab51addd3a70eb6d0923b