简介
Redux 是一个流行的状态管理工具，而 redux-mock-store 是一个 npm 包，它提供了一个 mock store，使得在测试中可以方便地测试 Redux 应用程序的 action 和 reducer。本文将介绍 redux-mock-store 的使用教程，可以帮助你更好地测试你的 Redux 应用程序。
安装
在安装 redux-mock-store 之前，必须先安装 redux，执行以下命令可以安装：
npm install --save redux
然后，就可以安装 redux-mock-store：
npm install --save-dev redux-mock-store
简单使用
使用 redux-mock-store 的第一步是创建一个 mock store。可以使用 createStore 方法创建一个真实的 store，然后将其传递到 mockStore 方法中。如下所示：
import { createStore } from 'redux';
import configureMockStore from 'redux-mock-store';
const mockStore = configureMockStore();
const store = mockStore({});现在，可以在 mock store 中分派动作。使用 dispatch 方法，
store.dispatch({ type: 'ADD_TODO', payload: 'Learn Redux' });然后可以使用 getState 方法获取存储在 mock store 中的状态：
const state = store.getState();
console.log(state); // { todos: [{ id: 1, text: 'Learn Redux' }]}创建 mock store
除了只是将空对象传递给 mockStore 方法以外，还可以提供一个包含应用程序状态的对象作为参数。在这种情况下，mock store 将以所提供的状态进行初始化。
const initialState = {
todos: [{ id: 1, text: 'Do Laundry' }, { id: 2, text: 'Wash Dishes' }],
};
const store = mockStore(initialState);现在，mock store 将具有一个包含两个 todo 项目的 todos 数组。
还可以使用 enhancers 来对 store 进行修改，比如 redux-thunk：
import thunk from 'redux-thunk'; const enhancers = [thunk]; const mockStoreWithMiddleware = configureMockStore(enhancers); const store = mockStoreWithMiddleware(initialState);
测试异步代码
在测试 Redux 应用程序时，经常会使用异步操作（如 AJAX 调用）。为了确保测试异步操作的正确性，mock store 还允许使用中间件，如 redux-thunk。
例如，可以编写一个 action，该 action 使用 redux-thunk 和 axios 获取数据并更新存储在 store 中的应用程序状态：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- ---- --------------
------ ----- --------- - -- -- ----- ---------- -- -
---------- ----- -------------------- ---
--- -
----- -------- - ----- ------------------------
---------- ----- --------------------- -------- ------------- ---
- ----- ----- -
---------- ----- --------------------- -------- ----------- ---
-
--可以使用 redux-mock-store 和 redux-thunk 测试此操作，如下所示：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- ---- --------------
------ - --------- - ---- ----------
-------------------
----- --------- - -- --- -- ----- ----- ---- -- - --- -- ----- ----- ---- ---
--------------- -------- ----- -- -- -
----- --------- - ----------------------------
----- ----- - --------------
----------------------------- ----- --------- ---
----- ----------------------------
----- ------- - -------------------
-------------------------
- ----- -------------------- --
- ----- --------------------- -------- --------- --
---
---在此测试中，使用 jest.mock() 来模拟 axios 的行为，并使用 axios.get.mockReturnValue() 来返回 mock 数据。然后，使用 store.dispatch() 来调用测试的操作，并使用 store.getActions() 获得所有分派到 store 的 action。最后，使用 expect() 来比较实际分派的 action 与预期 action。
结论
redux-mock-store 是一个非常有用的测试工具，它可以使测试 Redux 应用程序变得更加容易。本文介绍了 redux-mock-store 的使用方法，并提供了一些示例代码，希望能够帮助你更好地测试你的 Redux 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65241