Redux-Form 是一个可重用的 React 表单组件库，它具有丰富的 API，方便前端开发者构建强大和美观的表单。但是，测试 Redux-Form 表单组件需要遵循一些附加步骤。在这篇文章中，我们将学习如何使用 Jest 和 Enzyme 进行 Redux-Form 表单组件测试。
环境设置
在开始使用 Enzyme 进行测试之前，您需要先进行一些环境设置。以下是必需的软件包和库：Jest、Enzyme 和 React。
在项目根目录下使用 NPM 安装这些库。
npm install --save-dev jest enzyme react react-dom enzyme-adapter-react-16 redux-form
Enzyme 还需要适配器来使其与 React 一起使用。在 src 目录的 setupTests.js 文件中添加以下代码：
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });测试表单组件
现在我们已经准备好开始测试 Redux-Form 表单组件了。在本教程中，我们将使用一个带有两个输入字段的表单组件进行演示。该表单组件将接受名称和电子邮件作为输入，并在提交之前对其进行验证。
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -------------
------ - ------ --------- - ---- -------------
----- -------- - ------ -- -
----- ------ - ---
-- -------------- -
----------- - ------ - ------
-
-- --------------- -
------------ - ------ -- -------
-
------ -------
--
----- ----------- - -- ------ ------ ----- ----- - -------- ----- - -- -- -
-----
----------------------
-----
------ ---------- ------------------- ----------- --
-------- -- ----- -- ---------------------
------
------
--
----- ----------- - ----- -- -
----- - ------------ - - ------
------ -
----- ------------------------
------ ----------- ----------------------- ----------- ------------ --
------ ------------ ----------------------- ------------ ------------- --
------- -----------------------------
-------
--
--
--------------------- - -
------------- --------------------------
--
------ ------- -----------
----- ----------
---------
----------------现在，我们将编写测试用例确保该组件的正确性。
测试表单组件渲染
第一步是确保我们的表单组件正确呈现。您可以使用以下测试用例来测试表单的呈现。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
----------- ----------- -- -- -
----- ------- - -------------------- ------------------------ ----
----------------------------------
---
---在这个测试中，我们首先使用 Jest 的 describe 方法来说明我们正在测试的组件。然后，我们编写一个测试用例，使用 Enzyme 的 shallow 方法对表单组件进行初始化，并将 handleSubmit 函数作为 prop 传递给它，以便在不进行任何实际操作的情况下触发表单提交事件。最后，我们使用 Jest 的 expect 方法，将组件呈现的快照与已存储的快照进行比较。
如果组件的呈现方式发生更改，运行测试时则会显示快照差异。
测试表单验证
第二个测试的目的是测试表单验证。Redux-Form 提供了一种方便的方式来验证表单项目，以便在提交之前查找不合法的项目。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
----- ---------- - ----------
----- ----- - -
------------- -----------
--
--- --------
------------- -- -
------- - -------------------- ---------- ----
---
------------- ----- -------- -- -- -
------------------------------------------------
-------------------------------------------------
----- --------- - ----------------------------
----- ---------- - ----------------------------
----- ------ - -----------------------
---------------------------- - ------- - ----- ------- ------ -- - ---
----------------------------- - ------- - ----- -------- ------ -- - ---
--------------------------
--------------------------------------------
---
---在这个测试中，我们首先使用 beforeEach 方法初始化测试，并将 mockSubmit 函数传递给 handleSubmit 的 prop。接下来，我们测试是否有两个输入字段和一个“提交”按钮。最后，我们通过调用 simulate 方法模拟输入数据并提交表单，以确认 validate 方法是否检测到未输入任何数据的错误。
测试表单提交
最后，我们将确保表单正确提交。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ - -------- - ---- --------------
------ - ----------- - ---- --------
------ ----------- ---- --------------
------ ----------- ---- ----------------
----------------------- -- -- -
--- ------
--- --------
------------- -- -
----- - -------------------------
------- - ------
--------- --------------
------------ --
-----------
--
---
------------ -- -
------------------
----- - -----
---
----------- ---- -------------- -- -- -
----- --------- - ------------------------------
----- ---------- - -------------------------------
----- ------------ - --------------------------------
----- ---- - ---------------------
-------------------------- - -------
--------------------------- - -------------------
------------------------
------------------------------------------------------
----- -------
------ -------------------
---
---
---此测试用例检查表单数据是否以正确的格式传递给 Redux store。
我们首先使用 createStrore 方法创建 Redux store，并使用 mount 方法挂载我们的联系表单组件。然后，我们搜索该组件中的名称和电子邮件输入和提交按钮，并使用实例方法设置表单值。最后，我们模拟表单提交并检查数据是否已成功传递给 Redux store。
结论
在本文中，我们介绍了如何在 Redux-Form 表单组件上使用 Enzyme 进行测试。我们涵盖了可重用的表单组件的呈现、验证和提交，并提供了示例代码。测试对于保证任何应用程序的质量都至关重要，Redux-Form 表单组件也是不例外，确保测试可靠性和准确性是开发过程必须的一步。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671f63102e7021665efd5924