在 React 应用中，Redux 的 action 和 dispatch 是非常重要的一部分，它们能够帮助我们管理应用的状态和数据流。然而，在编写 Redux 应用时，我们也需要确保这些 action 和 dispatch 能够正常工作。为了达到这个目的，我们需要进行单元测试。
本文将介绍如何使用 Redux-Mock-Store 和 Enzyme 在 React 中测试 Redux 的 action 及 dispatch。我们将会探讨 Redux-Mock-Store 和 Enzyme 的基本概念，以及如何使用它们来编写测试代码。
Redux-Mock-Store
Redux-Mock-Store 是一个用于创建 Redux store 的模拟库。它能够帮助我们模拟 Redux store，并提供了一些辅助方法来测试 Redux action 和 dispatch。
安装
我们可以使用 npm 来安装 Redux-Mock-Store：
npm install --save-dev redux-mock-store
使用
在编写测试用例之前，我们需要先创建一个模拟的 Redux store。我们可以使用 createStore 方法来创建一个真实的 Redux store，然后使用 Redux-Mock-Store 的方法来创建一个模拟的 Redux store。
import { createStore } from 'redux';
import configureMockStore from 'redux-mock-store';
const mockStore = configureMockStore();
const store = mockStore({});在上面的代码中，我们使用 configureMockStore 方法创建了一个 Redux store 的模拟器。然后，我们使用模拟器的方法来创建了一个模拟的 Redux store。
接下来，我们可以使用 store.dispatch 方法来触发 Redux action：
store.dispatch({ type: 'ADD_TODO', text: 'Buy milk' });在上面的代码中，我们使用 store.dispatch 方法来触发一个 ADD_TODO 的 Redux action，并传递了一个 text 属性。
最后，我们可以使用 store.getActions 方法来获取触发的所有 Redux action：
expect(store.getActions()).toEqual([{ type: 'ADD_TODO', text: 'Buy milk' }]);在上面的代码中，我们使用 expect 和 toEqual 方法来断言 store.getActions 返回的值是否和我们期望的一样。
Enzyme
Enzyme 是一个 React 测试工具，它能够让我们方便地进行 React 组件的测试。它提供了一些方法来模拟组件的渲染，并使得我们能够方便地测试组件的状态和行为。
安装
我们可以使用 npm 来安装 Enzyme：
npm install --save-dev enzyme enzyme-adapter-react-16
使用
在编写测试用例之前，我们需要先创建一个 Enzyme 的适配器。我们可以使用 Enzyme 的 configure 方法来创建一个适配器：
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });在上面的代码中，我们使用 Enzyme 的 configure 方法来创建了一个适配器，并设置为 React 16 的适配器。
接下来，我们可以使用 Enzyme 的 shallow 方法来渲染一个组件，并获取组件的状态和行为：
import React from 'react';
import { shallow } from 'enzyme';
const component = shallow(<MyComponent />);在上面的代码中，我们使用 Enzyme 的 shallow 方法来渲染了一个名为 MyComponent 的组件，并将其存储在 component 变量中。
然后，我们可以使用 component.state() 方法来获取组件的状态：
expect(component.state()).toEqual({ count: 0 });在上面的代码中，我们使用 expect 和 toEqual 方法来断言组件的状态是否和我们期望的一样。
最后，我们可以使用 component.find 和 simulate 方法来模拟用户的行为：
component.find('button').simulate('click');
expect(component.state()).toEqual({ count: 1 });在上面的代码中，我们使用 component.find 方法来查找组件中的一个按钮，并使用 simulate 方法来模拟用户的点击行为。然后，我们使用 expect 和 toEqual 方法来断言组件的状态是否和我们期望的一样。
示例代码
下面是一个使用 Redux-Mock-Store 和 Enzyme 进行单元测试的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------------------ ---- -------------------
------ ----- ---- --------------
------ ----------- ---- ----------------
------ - ------- - ---- ------------
----- --------- - ----------------------------
----- ----- - --------------
----------------------- -- -- -
---------- -------- -------- -------- -- -- -
----- --------- - -------------------- ------------- ----
----------------------------
------------------------------------------------
---
---------- ------ --------- ------- -- -- -
----- --------- - -------------------- ------------- ----
-------------------------------------------
----------------------------------- ------ - ---
---
---在上面的代码中，我们首先导入了需要用到的库和组件。然后，我们创建了一个模拟的 Redux store，并使用它来渲染了一个 MyComponent 组件。
接着，我们编写了两个测试用例。第一个测试用例测试了组件的 addTodo 方法是否能够正确地触发 ADD_TODO action。第二个测试用例测试了组件的点击行为是否能够正确地更新组件的状态。
最后，我们使用 expect 和 toEqual 方法来断言测试用例的结果是否和我们期望的一样。
总结
在本文中，我们介绍了如何使用 Redux-Mock-Store 和 Enzyme 在 React 中测试 Redux 的 action 及 dispatch。我们学习了 Redux-Mock-Store 和 Enzyme 的基本概念，并编写了一个使用这两个工具进行单元测试的示例代码。通过本文的学习，我们应该能够更好地理解如何编写单元测试，并确保我们的 Redux 应用能够正常工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65137ed595b1f8cacdbdc711