在 React 开发中，表单组件是一种常见的组件类型，它们允许用户输入数据并将其发送到服务器进行处理。如果表单组件没有正确操作以及数据验证，可能会导致用户信息被篡改或者应用崩溃。因此，对于表单组件的测试是非常重要的。
Enzyme 是一种 widely-used 的React的测试工具，它允许测试人员以一种简单的、直观的方式对React组件的行为进行测试。本文将从如何安装Enzyme开始讲解如何使用Enzyme进行表单组件的测试，希望能够帮助读者更好的掌握React的测试技术。
安装Enzyme
在开始测试之前，我们需要首先安装Enzyme。由于它不属于React的核心库，所以我们需要将其作为依赖来安装它。Enzyme依赖于 react-test-renderer ，所以在安装Enzyme之前，请确保您的应用程序已正确安装。
npm install --save-dev enzyme react-test-renderer
测试表单组件
下面我们来实现一个简单的表单组件及其测试案例，这个表单组件允许用户输入用户名和密码，并在提交时将其发送到服务器。
1. 表单组件
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- --------- ------- --------- -
------------------ -
-------------
---------- - -
--------- ---
--------- --
--
-
------------ - ------- -- -
-----------------------
----- - --------- -------- - - -----------
----------------------------- ----------
-
-------------------- - ------- -- -
--------------- --------- ------------------ ---
-
-------------------- - ------- -- -
--------------- --------- ------------------ ---
-
-------- -
------ -
----- -----------------------------
-----
------------------------
------ ----------- ------------------------------------ --
------
-----
------------------------
------ --------------- ------------------------------------ --
------
------- ----------------------------
-------
--
-
-
------ ------- ----------2. 测试案例
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ --------- ---- --------------
--------------------- -- -- -
---------- ---- -------- ---- ---- ---- -- ----------- -- -- -
----- ------------ - ----------
----- ------- - ------------------ ----------------------- ----
----- ----- - - ---------------- -- --
--------------------------------------- -------
----------------------------------------
---
---------- ------ ----- ---- -------- ----- -- --------- -- -- -
----- ------- - ------------------ ----
----- ----- - - ------- - ------ ---------- - --
----------------------------------------------------- -------
------------------------------------------------------
---
---------- ------ ----- ---- -------- ----- -- --------- -- -- -
----- ------- - ------------------ ----
----- ----- - - ------- - ------ -------------- - --
--------------------------------------------------------- -------
----------------------------------------------------------
---
---3. 解释测试案例
在我们的测试案例中，我们首先使用 shallow 方法来渲染 LoginForm 组件。这个方法只渲染组件本身，而不用担心其子组件的渲染。
第一个测试案例测试了当表单被提交时，onSubmit 的props是否被调用。
测试案例中，我们通过触发提交表单的事件来模拟人工提交。随后，我们期望 onSubmit prop 会被触发。
it('should call onSubmit prop when form is submitted', () => {
const onSubmitMock = jest.fn();
const wrapper = shallow(<LoginForm onSubmit={onSubmitMock} />);
const event = { preventDefault() {} };
wrapper.find('form').simulate('submit', event);
expect(onSubmitMock).toHaveBeenCalled();
});下一个测试案例测试了当输入用户名时，表单组件是否能够更新其状态。
测试案例中，我们访问 username input，通过模拟输入用户名导致的事件来触发组件状态更新。随后，我们期望组件的状态会被成功更新。
it('should update state when username input is changed', () => {
const wrapper = shallow(<LoginForm />);
const event = { target: { value: 'testuser' } };
wrapper.find('input[type="text"]').simulate('change', event);
expect(wrapper.state('username')).toEqual('testuser');
});第三个测试案例测试了当输入密码时，表单组件是否能够更新其状态。
测试案例中，我们使用与前一个案例相同的方法添加密码输入，我们还使用 change 模拟Password输入的事件。随后，我们期望组件的状态会被成功更新。
it('should update state when password input is changed', () => {
const wrapper = shallow(<LoginForm />);
const event = { target: { value: 'testpassword' } };
wrapper.find('input[type="password"]').simulate('change', event);
expect(wrapper.state('password')).toEqual('testpassword');
});结论
本文中，我们详细的讲解如何安装Enzyme并测试React中的表单组件。通过学习以上示例，您可以进一步理解表单组件渲染，以及在测试中如何处理事件和测试状态信息。测试是React开发中的一个非常重要的技巧，它能
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674995cda1ce006354680bbe