在前端开发中，表单组件是非常常见的组件之一，因此如何测试表单组件是前端测试的关键环节。Enzyme 是 React 的一个测试工具，可用于模拟 React 组件并在测试中进行交互。
在本文中，我们将通过一个具体的示例来演示如何使用 Enzyme 测试 React 中的表单组件，并深入了解 Enzyme 中的相关方法和测试策略。
为何选择 Enzyme 进行测试
在 React 开发中，我们常常会遇到以下问题：
- 如何对组件进行交互测试
- 如何对组件的状态更改进行测试
- 如何对组件的属性进行测试
这些问题可以通过 Enzyme 解决。Enzyme 是一个流行的 React 测试工具，它可以模拟 React 组件并允许我们在测试中进行交互操作和状态更改。
Enzyme 包括三个模式：shallow，mount，和 render。在本文中，我们主要使用 shallow 和 mount 两种模式。
- 使用 shallow 模式：深层次渲染组件，并返回一个浅层次包装器。该包装器可以用于测试组件的行为和交互，但不会渲染子组件。
- 使用 mount 模式：在 DOM 中渲染组件，在测试中可以与其它组件进行交互。该模式可用于测试组件的渲染和交互，但比 shallow 模式更慢。
接下来，我们将使用这些方法测试 React 中的表单组件。
编写示例代码
接下来，我们将从创建一个简单的表单开始，然后创建一个测试套件。
创建表单组件
我们首先创建一个表单组件 LoginForm，该组件包括一个输入框和一个按钮，用户可以在输入框中输入用户名和密码。点击提交按钮后，组件将检查用户名和密码是否符合规则，并在符合规则时将表单值通过 props 的方式传递给父组件。
------ ----- ---- --------
----- --------- ------- --------------- -
------------------ -
-------------
---------- - -
--------- ---
--------- ---
----------------- ------
--
-
-------------------- - ----- -- -
--------------- --------- ------------------ ---
--
-------------------- - ----- -- -
--------------- --------- ------------------ ---
--
------------ - ----- -- -
-----------------------
----- - --------- -------- - - -----------
-- --------
----- ------------- - -----------------
----- ------------- - -----------
-- --------- -- -------- -- ---------------------------- -- ----------------------------- -
--------------------- --------- -------- ---
- ---- -
--------------- ----------------- ---- ---
-
--
-------- -
------ -
----- -----------------------------
-----
------ ------------------------------------
------ ------------- ----------- --------------------------- ------------------------------------ --
------
-----
------ ------------------------------------
------ ------------- --------------- --------------------------- ------------------------------------ --
------
------- -----------------------------
---------------------------- -- ------------ -------- -- ---------------
-------
--
-
-
------ ------- ----------创建测试套件
接下来，我们将创建一个测试套件，其中包含多个测试用例，分别测试 LoginForm 组件中的不同部分。首先，我们安装必要的依赖项：
--- ------- ---------- ------ ----------------------- -------------------
然后，我们创建一个包含测试用例的文件 LoginForm.test.js。该文件包括四个测试用例，分别测试组件的渲染，输入，提交和表单验证。
------ ----- ---- --------
------ - -------- ----- - ---- ---------
------ --------- ---- --------------
--------------------- -- -- -
----------- ------- ---------- -- -- -
------------------ ----
---
------------ --- ------- ------- ------- -- -- -
----- ------- - ------------------ ----
---------------------------------------------
---------------------------------------------
-----------------------------------------------------
---
----------- ----- -- ----- -------- -- -- -
----- ------- - ------------------ ----
----- ------------- - --------------------------
-------------------------------- - ------- - ------ --------------- - ---
-------------------------------------------------------
---
--------- -------- ---- ---- -- --------- ---- ----- -------- -- -- -
----- ---------------- - ----------
----- ------- - ---------------- --------------------------- ----
----- ------------- - --------------------------
----- ------------- - --------------------------
----- ---- - ---------------------
-------------------------------- - ------- - ------ --------------- - ---
-------------------------------- - ------- - ------ -------- - ---
------------------------
----------------------------------------------- --------- ---------------- --------- -------- ---
---
-------- --- ---- -------- ---- ---- -- --------- ---- ------- -------- -- -- -
----- ---------------- - ----------
----- ------- - ---------------- --------------------------- ----
----- ------------- - --------------------------
----- ------------- - --------------------------
----- ---- - ---------------------
-- -------
-------------------------------- - ------- - ------ ---------------- - ---
-------------------------------- - ------- - ------ ------ - ---
------------------------
------------------------------------------------
---
---让我们逐个测试用例地看一下它们的作用。
测试用例 1：渲染组件
该测试用例确保 LoginForm 组件能够正常渲染且不会崩溃。
----------- ------- ---------- -- -- - ------------------ ---- ---
测试用例 2：验证初始状态
该测试用例确保 LoginForm 组件的初始状态是正确的，即表单输入框中没有值。
------------ --- ------- ------- ------- -- -- - ----- ------- - ------------------ ---- --------------------------------------------- --------------------------------------------- ----------------------------------------------------- ---
测试用例 3：测试表单输入
该测试用例确保我们可以通过测试代码更改表单输入框的值，并验证其状态是否已更改。
----------- ----- -- ----- -------- -- -- - ----- ------- - ------------------ ---- ----- ------------- - -------------------------- -------------------------------- - ------- - ------ --------------- - --- ------------------------------------------------------- ---
测试用例 4：测试表单提交和验证
该测试用例演示了如何提交表单数据，并验证表单数据的有效性。
--------- -------- ---- ---- -- --------- ---- ----- -------- -- -- - ----- ---------------- - ---------- ----- ------- - ---------------- --------------------------- ---- ----- ------------- - -------------------------- ----- ------------- - -------------------------- ----- ---- - --------------------- -------------------------------- - ------- - ------ --------------- - --- -------------------------------- - ------- - ------ -------- - --- ------------------------ ----------------------------------------------- --------- ---------------- --------- -------- --- --- -------- --- ---- -------- ---- ---- -- --------- ---- ------- -------- -- -- - ----- ---------------- - ---------- ----- ------- - ---------------- --------------------------- ---- ----- ------------- - -------------------------- ----- ------------- - -------------------------- ----- ---- - --------------------- -- ------- -------------------------------- - ------- - ------ ---------------- - --- -------------------------------- - ------- - ------ ------ - --- ------------------------ ------------------------------------------------ ---
这两个测试用例分别测试了表单提交和表单验证。在第一个测试用例中，我们使用 mount 模式渲染 LoginForm 组件，并使用 simulate 方法更改输入框值，然后模拟提交表单。我们使用 jest.fn() 创建一个模拟函数来替代实际的 handleSubmit 函数。最后，我们检查模拟函数是否被调用，并确保提交的表单值是正确的。
第二个测试用例类似，但不同之处在于我们模拟的表单数据不符合规则，因此我们预计模拟方法不会被呼叫。
结论
现在，您已经了解了如何使用 Enzyme 测试 React 中的表单组件，以及如何模拟用户输入和模拟表单提交，测试表单的验证逻辑和输入数据。Enzyme 是 React 测试的强大工具，可以简化测试过程并提高测试覆盖率。在您的下一个 React 项目中尝试使用 Enzyme 进行测试。
完整代码：
------ ----- ---- --------
----- --------- ------- --------------- -
------------------ -
-------------
---------- - -
--------- ---
--------- ---
----------------- ------
--
-
-------------------- - ----- -- -
--------------- --------- ------------------ ---
--
-------------------- - ----- -- -
--------------- --------- ------------------ ---
--
------------ - ----- -- -
-----------------------
----- - --------- -------- - - -----------
-- --------
----- ------------- - -----------------
----- ------------- - -----------
-- --------- -- -------- -- ---------------------------- -- ----------------------------- -
--------------------- --------- -------- ---
- ---- -
--------------- ----------------- ---- ---
-
--
-------- -
------ -
----- -----------------------------
-----
------ ------------------------------------
------ ------------- ----------- --------------------------- ------------------------------------ --
------
-----
------ ------------------------------------
------ ------------- --------------- --------------------------- ------------------------------------ --
------
------- -----------------------------
---------------------------- -- ------------ -------- -- ---------------
-------
--
-
-
------ ------- ---------------- ----- ---- --------
------ - -------- ----- - ---- ---------
------ --------- ---- --------------
--------------------- -- -- -
----------- ------- ---------- -- -- -
------------------ ----
---
------------ --- ------- ------- ------- -- -- -
----- ------- - ------------------ ----
---------------------------------------------
---------------------------------------------
-----------------------------------------------------
---
----------- ----- -- ----- -------- -- -- -
----- ------- - ------------------ ----
----- ------------- - --------------------------
-------------------------------- - ------- - ------ --------------- - ---
-------------------------------------------------------
---
--------- -------- ---- ---- -- --------- ---- ----- -------- -- -- -
----- ---------------- - ----------
----- ------- - ---------------- --------------------------- ----
----- ------------- - --------------------------
----- ------------- - --------------------------
----- ---- - ---------------------
-------------------------------- - ------- - ------ --------------- - ---
-------------------------------- - ------- - ------ -------- - ---
------------------------
----------------------------------------------- --------- ---------------- --------- -------- ---
---
-------- --- ---- -------- ---- ---- -- --------- ---- ------- -------- -- -- -
----- ---------------- - ----------
----- ------- - ---------------- --------------------------- ----
----- ------------- - --------------------------
----- ------------- - --------------------------
----- ---- - ---------------------
-- -------
-------------------------------- - ------- - ------ ---------------- - ---
-------------------------------- - ------- - ------ ------ - ---
------------------------
------------------------------------------------
---
---来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67219b922e7021665e082e33