React 表单组件是 Web 开发中重要的一部分。我们通常需要进行各种控件的输入和验证，以确保用户输入的格式和内容都符合我们的要求。而测试表单组件是我们在开发过程中不可避免的一部分，这也有助于降低代码中的错误率。本文将介绍使用 Enzyme 进行 React 表单组件测试的方法。
Enzyme 是什么？
Enzyme 是 Airbnb 推出的 React 组件测试工具。它基于 React Test Utils 并且提供了更好的 API 以供我们使用，它主要有三个模块：
shallow：用来渲染浅层组件，通常用于组件单元测试，它仅渲染当前组件，不渲染子组件。mount：用来渲染完整组件，通常用于组件集成测试，它会递归渲染子组件。render：用来渲染静态组件，返回一个 JSON 对象，通常用于 UI 测试和快照测试。
Enzyme 的安装和基本使用
我们可以使用 npm 或 yarn 进行 Enzyme 的安装：
npm install --save-dev enzyme enzyme-adapter-react-16
安装完成后，我们需要配置 Enzyme 适配器：
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });接下来，我们可以开始使用 Enzyme 进行组件测试。假设我们有一个简单的输入框组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- -------- --------------- -
------ -
-----
------ ----------------------------------------
------ ----------- ------------- ----------------- ------------------- ------------------------- --
------
--
-我们可以使用 shallow 方法进行组件单元测试：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ -------- ---- -------------
------------------ ----------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - ----------------- ----
----------------------------------
---
---我们在测试用例中使用了 toMatchSnapshot 方法，它能够用来帮助我们验证组件渲染是否正确，使用方法请参见 Jest 官方文档。我们还可以使用 find 和 simulate 方法模拟用户输入事件：
it('should handle input change event', () => {
const onChange = jest.fn();
const wrapper = shallow(<InputBox onChange={onChange} />);
wrapper.find('input').simulate('change');
expect(onChange).toHaveBeenCalledTimes(1);
});find 方法用于查找组件内部的子节点，它返回一个包含子元素的组件对象，我们可以在这个对象上进行操作。而 simulate 方法用于模拟用户事件，它接受一个事件名作为参数。
针对表单组件的测试
对于常见的表单组件（如输入框、复选框、下拉框等），我们需要进行各种输入和验证测试。以输入框为例，我们需要对以下情况进行测试：
- 组件渲染是否正确；
- 输入框中的值是否被正确地设置；
- 当用户输入符合要求时，是否能够正确触发
onChange事件； - 当用户输入不符合要求时，是否能够正确触发验证错误。
我们可以使用以下代码进行测试：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ -------- ---- -------------
------------------ ----------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - ----------------- ----
----------------------------------
---
---------- --- ----- ----- ----------- -- -- -
----- ------- - ----------------- ------------ ----
------------------------------------------------------------
---
---------- ------ ----- ------ ----- ----------- -- -- -
----- -------- - ----------
----- ------- - ----------------- ------------------- ----
----- ----- - -------
---------------------------------------- - ------- - ----- - ---
----------------------------------------------------------
--------------------------------------------------------------
---
---------- ------ ---------- ----- ----------- -- -- -
----- --------- - --
----- ------- - ----------------- --------------------- ----
----- ----- - ---------
---------------------------------------- - ------- - ----- - ---
---------------------------------------------------- ------------ ------
---
---上述代码测试了输入框组件的各种情况，它们分别对应以上提及的测试内容。我们可以根据实际需求来编写测试用例，以确保测试覆盖面和准确度。
总结
本文介绍了使用 Enzyme 进行 React 表单组件测试的方法。我们可以使用 shallow 方法对单元组件进行测试，使用 find 和 simulate 方法模拟用户事件。同时，我们需要针对不同的输入和验证情况编写相应的测试用例，以保证测试的准确度和覆盖面。 Enzyme 是 React 组件测试的绝佳工具，它能够大大简化我们的测试过程。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645222dc675af4061b5ca86d