在 React 应用中，表单是常见的交互元素。随着项目的复杂度和规模不断增加，测试表单变得越来越必要，以确保代码质量和应用稳定性。在本文中，我们将探讨如何使用 Jest 和 React Testing Library 测试表单的示例。
环境准备
在开始之前，需要确保您已经安装了以下环境：
- Node.js
- npm 或 yarn
在项目中加入以下依赖：
jest@testing-library/react@testing-library/jest-dom
创建测试用例
我们来看一个简单的表单组件，其中包含一个输入框、一个下拉框和一个提交按钮。它的代码如下：
------ ------ - -------- - ---- --------
----- ---- - -- -------- -- -- -
----- ------ -------- - -------------
----- -------- ---------- - -------------
----- ------------ - ------- -- -
-----------------------
---------- ----- ------ ---
--
------ -
----- ------------------------
-------
-----
------
-----------
------------
----------------- -- ----------------------------
--
--------
--- --
-------
-------
------- -------------- ----------------- -- -------------------------------
------- --------------- ---------------
------- --------------------------
------- ------------------------------
---------
--------
--- --
------- ------------- --------------- -- ------------------------
-------
--
--
------ ------- -----我们将使用 Jest 和 React Testing Library 来编写测试用例。在 src 目录下创建一个名为 Form.test.js 的文件，并编写以下测试用例：
------ ----- ---- -------- ------ - ------- ------- --------- - ---- ------------------------- ------ ------------------------------------------ ------ ---- ---- --------- ------------- ---- ------ ----------- -- -- - ------------ ---- ----------------------------------------------------------- ------------------------------------------------------------- ----- ------------ - -------------------------- - ----- --------- --- ----------------------------------------- ------------------------------------ --- -------------- -------- ---- --- ------ -- -------- -- -- - ----- ------------ - ---------- ------------ ----------------------- ---- ----- --------- - ------------------------------- ----- ----------- - --------------------------------- ----- ------------ - -------------------------- - ----- --------- --- ----- ------- - ------- --------------------------- - ------- - ------ ------- - --- --------------------------------------- ----- --------- - ------- ----------------------------- - ------- - ------ --------- - --- ------------------------------------------- ------------------------------ ------------------------------------------- ----- -------- ------- --------- --- ---
第一个测试用例测试表单是否正确地渲染出了输入框、下拉框和提交按钮。我们使用 getByLabelText 和 getByRole 来检查相应的元素是否已经出现在界面上，并验证提交按钮是否处于禁用状态。
第二个测试用例测试表单提交后是否将正确的数据传递给回调函数。我们使用 jest.fn() 来创建一个模拟函数，当表单提交时调用该函数，并将表单数据传递给它。使用 fireEvent 模拟用户输入，并确保表单数据传递正确。
运行测试用例
最后，在终端中运行以下命令来运行测试用例：
--- --- ----
或
---- ----
如果所有的测试用例都通过，则控制台会输出所有测试都通过的消息，否则将输出错误信息和测试用例中的错误。
总结
使用 Jest 和 React Testing Library 编写测试用例可以帮助我们更好地保障代码质量和应用稳定性。本文演示了如何测试表单组件的输入和提交。通过编写测试用例，我们可以确保表单组件与用户的交互行为符合预期，并发现并修复潜在的错误。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64537942968c7c53b07d93bf