在前端开发中，组件的测试是一个十分重要的环节。对 Redux 组件进行测试时，往往需要模拟 store，以便测试组件与 store 交互的结果。在使用 Enzyme 测试 Redux 组件时，也需要考虑如何模拟 store。本文将介绍如何使用 Enzyme 模拟 store。
Enzyme 是什么？
Enzyme 是 Airbnb 开发的一款 React 组件测试工具。它提供了几种 API 接口，可以让开发者方便地对组件进行测试。
如何安装 Enzyme？
首先，需要安装 Enzyme：
npm install enzyme --save-dev
然后，需要安装 Enzyme 的 Adapter：
npm install enzyme-adapter-react-16 --save-dev
如何配置 Enzyme？
需要在测试文件中进行 Enzyme 配置，并且要在每个测试文件中都进行配置。具体的配置方式如下：
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });如何模拟 store？
在使用 Enzyme 测试 Redux 组件时，需要模拟一个 store，以便测试组件与 store 交互的结果。可以使用 redux-mock-store 库来模拟 store。该库提供了一个函数，可以方便地创建一个可以使用的 store。具体的代码如下：
import configureMockStore from 'redux-mock-store'; const mockStore = configureMockStore(); const store = mockStore(initialState);
这样就可以创建一个 store，用于测试组件与 store 交互。其中，initialState 是 store 的初始状态，可以根据测试需要进行设置。
如何在测试中使用模拟的 store？
在使用 Enzyme 测试 Redux 组件时，可以使用 mount() 函数来渲染组件，并且将模拟的 store 作为参数传递给组件。具体的代码如下：
const wrapper = mount(<Component store={store} />);然后，在测试中可以使用 Enzyme 提供的函数来获取组件的状态和属性，并且可以对组件的行为进行模拟。例如，可以模拟组件的点击事件，并且验证模拟的事件是否产生了正确的结果。具体的代码如下：
wrapper.find('button').simulate('click');
expect(wrapper.find('span').text()).toBe('Result: 100');示例代码
下面是一个使用 Enzyme 模拟 store 的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- - ----- - ---- ---------
------ ------- ---- --------------------------
------ ------------------ ---- -------------------
------ - -------- - ---- --------------
------ --------- ---- --------------
------------------ -------- --- --------- ---
----- --------- - ---------------------
----- ------------ - -
------- --
--
----- ----- - ------------------------
-------------------- ---- -- -- -
---------- ------ ---------- ---- -- -- -
----- ------- - --------------- ------------------------ ---------------
----------------------------------
---
---------- --- -- -- ------ ---- ------ -- --------- -- -- -
----- ------- - --------------- ------------------------ ---------------
-----------------------------------------
------------------------------------------------- -----
---
---结论
在使用 Enzyme 测试 Redux 组件时，需要模拟一个 store，以便测试组件与 store 交互的结果。可以使用 redux-mock-store 库来模拟 store，并且使用 Enzyme 提供的 API 接口来测试组件的状态和行为。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6731a1200bc820c582398580