在开发 React 应用过程中，表单组件无疑是不可或缺的。同时，为了确保我们开发的代码质量和可靠性，我们需要充分测试表单组件。本文将介绍如何使用 Enzyme 和 Yup 进行 React 表单组件的单元测试。
Enzyme 简介
Enzyme 是 React 测试工具集中一个常用的工具。它提供了一系列 API，用于测试 React 组件。这包括渲染组件、触发事件、查找子组件等。Enzyme 具有易于学习和使用，同时也能为我们提供可靠的测试结果。
首先，我们需要在项目中安装 Enzyme：
npm install --save-dev enzyme enzyme-adapter-react-16
由于 Enzyme 需要适配 React 版本，我们还需要单独安装适配器，这里以 React 16 为例。
Yup 简介
Yup 是一个 JavaScript 对象模式验证器，它用于检查表单输入的正确性。Yup 提供了多种验证选项，包括类型、限制长度、必填字段等。使用 Yup 可以帮助我们更好地对表单组件进行测试。
与 Enzyme 一样，我们也需要安装 Yup：
npm install yup
接下来我们将介绍如何使用 Enzyme 和 Yup 进行 React 表单组件的单元测试。
示例代码
我们先来看一个简单的示例：一个登录表单，包括用户名和密码两个输入框，以及一个提交按钮。
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -------------
------ - ------- ----- ----- - ---- ---------
------ - -- --- ---- ------
----- --------- - -- -------- -- -- -
----- ------------- - - --------- --- --------- -- --
----- ---------------- - --------------------
--------- -------------------------------
--------- ------------------------------
---
----- ------------ - -------- - ------------- -- -- -
--------------------
-----------------
---------------------
--
------ -
------- ----------------------------- ----------------------------------- ------------------------
--- ------------- ------- ------- -- -- -
------
-----
------ ------------------------------
------ ----------- --------------- ------------- --
----------------- -- --------------- -- -----------------------------
------
-----
------ -----------------------------
------ --------------- --------------- ------------- --
----------------- -- --------------- -- -----------------------------
------
------- ------------- ------------------------
--
---------
-------
--
---------
--
--
------------------- - -
--------- --------------------------
--
------ ------- ----------可以看到，在该示例中我们使用 Formik 和 Yup 搭建了一个登录表单组件。其中，Formik 是一个简化表单处理的库，Yup 则用于验证表单输入。
Enzyme 测试
针对该组件，我们需要写一些测试用例来检查其是否正确处理用户输入。
首先，我们需要创建一个测试文件。命名为 LoginForm.test.js：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ --------- ---- --------------
--------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - ------------------ ------------ -- --- ----
----------------------------------
---
---------- ---- -------- ---- -------- -- -- -
----- -------- - ----------
----- ------- - ------------------ ------------------- ----
----- ---- - ---------------------
------------------------
------------------------------------------
---
---------- --- ------ ---- ----- -- --------- -- -- -
----- -------- - ----------
----- ------- - ------------------ ------------------- ----
----- ---- - ---------------------
------------------------
------------------------------------------
---
---首先，我们编写一个简单的快照测试，测试组件是否正确渲染。
其次，我们需要测试表单提交事件。我们使用 jest.fn() 创建一个模拟函数，并将其引入到我们的表单组件中。随后，在测试过程中，我们查找表单元素并使用 simulate 模拟提交事件。最后，我们检查 onSubmit 函数是否被调用。
最后一个测试用例是检查表单验证是否有效。我们要检查重要字段（即用户名和密码）是否为空，是否会导致提交失败。我们可以模拟这种情况，使用 simulate 模拟提交事件，并检查是否调用了 onSubmit 函数。
Yup 测试
Yup 提供了多种验证选项，无论是强制要求必填项还是验证电子邮件地址的正则表达式。我们使用 Yup 来保障我们的表单工作正常。
首先，我们将在 Yup 对象中创建一个 validationSchema 用于验证表单的输入。在以上代码示例中，我们在组件中定义了有效的 validationSchema。
const validationSchema = Yup.object().shape({
username: Yup.string().required('用户名必填'),
password: Yup.string().required('密码必填'),
});我们继续编写测试代码来验证 validationSchema 是否有效。新建一个文件 LoginForm.validation.test.js，开始编写我们的测试代码：
-- -------------------- ---- -------
------ - -- --- ---- ------
------ ----- ---- --------
------ - ----- - ---- ---------
------ --------- ---- --------------
----- --------------- - ----- -- --
--------- ----------
---------
---
------------------- ------------ -- -- -
--- ------
--- --------
--- -------
------------- -- -
----- - --------------------
------- - ---------------- ---------- ----
------ - -----------------------
---
----- ---------- - ----- ----- -- -
----- ------------------------------ -
-------------- ----------
---
-----------------
--
---------- --- ------ ---- -- ----- -- ------- ----- -- -- -
----- ------------ --------- --- --------- -- ---
----- ------------- - --------------------------------------------
----- ------------- - --------------------------------------------
-------------------------------------------
------------------------------------------
---
---------- ------ ---- -- ----- -- --------- ----- -- -- -
----- ------------ --------- ------- --------- -------- ---
----- ------------- - --------------------------
--------------------------------------
---
---------- ---- ----- ------- -- ------ -- -- -
----- ------------- - ----------------------------------------------
-------------------------------
-----------------
----- ------------- - --------------------------------------------
-------------------------------------------
---
---首先，我们定义了一个辅助函数 createTestProps()，用于创建模拟函数的传入参数。
接着，我们使用 mount() 渲染组件，以便在测试过程中能够访问其各种属性。我们使用 find() 和 prop() 方法查找表单元素和元素属性。
在测试过程中，我们编写了三个测试用例。第一个用例检查是否能成功阻止表单提交，第二个用例检查输入是否符合要求，第三个测试用例检查是否正确显示错误信息。
总结
通过本文，我们了解了如何使用 Enzyme 和 Yup 进行 React 表单组件的单元测试。Enzyme 提供了一系列 API，用于测试 React 组件。而 Yup 则用于验证表单输入。两者结合，可以帮助我们更准确地测试组件输入和输出的正确性。
React 表单组件的单元测试是重要的开发流程之一，帮助我们在应用构建阶段发现和解决潜在问题。希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e7c18ef6b2d6eab334201a