简介
在前端开发过程中，我们常常需要使用 Redux 来进行状态管理。Redux Test Utils 是 Redux 的一个测试工具库，可供开发者进行针对 Redux 的测试。@types/redux-test-utils 则是该库的 TypeScript 类型定义的一个 npm 包。本篇文章将介绍如何使用该 npm 包，以及该测试库的基础概念和用法。
安装
使用 npm，可以在项目目录下通过如下命令安装 @types/redux-test-utils：
npm install @types/redux-test-utils --save-dev
使用
在安装了 @types/redux-test-utils 后，我们可以轻松地使用它提供的类型。
createMockStore
createMockStore 是 Redux Test Utils 提供的用于创建 store 的方法。注意，它只是创建了 store 的桩体， 并非真正的 redux store，需要配置对应的 initialState，以及可选的 middlewares 和 enhancers。它是一个高阶函数，接受 initialState，middlewares 和 enhancers 三个参数。
示例：
-- -------------------- ---- ------- ------ - ---------------- --------- - ---- -------------------------- --------- -------- - ------ ------- - ----- ------------- -------- - - ------ -- -- ----- --------- - ---------------------------- ----- ------ ------------------- - ------------------------
通过 createMockStore，我们成功地创建了一个 store 并指定了它的初始状态。
mockStore.dispatch
mockStore 的 dispatch 方法用于触发 action，并将 action 发送到 reducer 中进行处理，以更新 redux store 的状态。
示例：
store.dispatch({ type: "INCREMENT" });
store.dispatch({ type: "INCREMENT" });在上述示例中，我们以执行两次 INCREMENT 的操作，使 count 的值从 0 变为 2。
mockStore.getActions
mockStore 的 getActions 方法返回已经被触发的 action 数组。在测试中，我们可以使用它来验证 action 是否被正确触发。
示例：
expect(store.getActions()).toEqual([
{ type: "INCREMENT" },
{ type: "INCREMENT" },
]);在上述示例中，我们使用了 Jest 的 expect 断言方法，将 store.getActions() 的返回值与我们期望的结果进行了比较。
mockStore.clearActions
mockStore 的 clearActions 方法用于清空存储在 store 中的 actions 数组。
示例：
store.clearActions(); expect(store.getActions().length).toBe(0);
在上述示例中，我们使用了 Jest 的 toBe 断言方法，将 store.getActions().length 的返回值与我们期望的结果进行了比较。
指导意义
通过使用 @types/redux-test-utils，我们可以更加方便地进行针对 Redux 的单元测试。在创建测试时，我们可以使用高阶函数 createMockStore 创建一个 store 并指定它的初始状态，在创建后可以使用 dispatch 方法触发 action，通过 getActions 方法来检验 action 是否被正确触发并进行清空存放 actions 的数组。掌握这些基础概念和用法，可以帮助我们更加深入地理解 Redux 并且更加有效地进行单元测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedc1b3b5cbfe1ea0611eb8