Enzyme 测试中如何模拟用户交互
Enzyme 是一个用于 React 应用程序的 JavaScript 测试工具，它提供了强大的测试实用程序，以使您更轻松地测试 React 组件的行为。在测试中，模拟用户交互是非常重要的一个方面，因为这有助于确保组件正常工作，并且用户交互的各种场景都得到了良好的测试覆盖。在本文中，我们将介绍如何使用 Enzyme 模拟用户交互。
- 安装 Enzyme
首先，您需要安装 Enzyme。Enzyme 可以通过 npm 安装：
npm install --save-dev enzyme enzyme-adapter-react-16
- 配置 Enzyme 适配器
安装 Enzyme 后，您需要配置适配器。适配器允许 Enzyme 适应不同版本的 React。在 Enzyme 文档中，我们可以找到适配器的安装指南。目前，Enzyme-adapter-react-16 是适用于 React 16 的适配器，所以我们需要在测试文件中添加以下代码：
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });- 模拟用户交互
一旦您的 Enzyme 安装和配置完成，下一步就是模拟用户交互。Enzyme 提供了各种方法来模拟用户交互，例如点击，输入和提交表单等操作。
点击事件：
const wrapper = shallow(<Button onClick={mockFn}>Click Me</Button>);
wrapper.find('button').simulate('click');
expect(mockFn).toHaveBeenCalled();输入事件：
const wrapper = shallow(<Input inputHandler={mockFn} />);
wrapper.find('input').simulate('change', { target: { value: 'hello' } });
expect(mockFn).toHaveBeenCalledWith('hello');表单事件：
const wrapper = mount(<Form onSubmit={mockFn} />);
wrapper.find('form').simulate('submit');
expect(mockFn).toHaveBeenCalled();- 针对函数式组件模拟用户交互
对于函数式组件的模拟，由于需要将模拟的 props 传递到组件中，我们需要使用 mount() 而不是 shallow()。
const mockFn = jest.fn();
const wrapper = mount(<FunctionButton onClick={mockFn}>Click Me</FunctionButton>);
wrapper.find('button').simulate('click');
expect(mockFn).toHaveBeenCalled();总结
模拟用户交互对于组件的测试是一项非常重要的任务。使用 Enzyme，我们可以轻松地模拟各种用户交互，例如点击，输入和提交表单等操作，从而确保组件在各种用户交互场景下表现正常。通过本文的指导，您将有能力扩展您的测试覆盖并进一步提高您的组件质量。
参考示例代码
-- -------------------- ---- -------
------ ------ ---- ---------
------ ------- ---- --------------------------
------ ----- ---- --------
------ - -------- ----- - ---- ---------
------------------ -------- --- --------- ---
---------------- ----------- -- -- -
-------------- ----- ------- -- -- -
----- ------ - ----------
----- ------- - --------------- ---------------------- -------------
-----------------------------------------
----------------------------------
---
---
--------------- ----------- -- -- -
-------------- ----- ------- -- -- -
----- ------ - ----------
----- ------- - -------------- --------------------- ----
---------------------------------------- - ------- - ------ ------- - ---
---------------------------------------------
---
---
-------------- ----------- -- -- -
-------------- ---- ------- -- -- -
----- ------ - ----------
----- ------- - ----------- ----------------- ----
----------------------------------------
----------------------------------
---
---
------------------------ ----------- -- -- -
-------------- ----- ------- -- -- -
----- ------ - ----------
----- ------- - --------------------- ---------------------- ---------------------
-----------------------------------------
----------------------------------
---
---
-------- ------------- -
------ -
------- ------------------------
----------------
---------
--
-
-------- ------------ -
------ -
------ ------------- -- ----------------------------------- --
--
-
-------- ----------- -
------ -
----- --------------------------
------- -----------------------------
-------
--
-
-------- --------------------- -
------ -
------- ------------------------
----------------
---------
--
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b4062f48841e9894030a89