使用 Jest 对 Vuex 模块进行单元测试

如果你正在构建一个中型到大型的 SPA，你很可能会遇到想要更好地处理 Vue 组件状态的情况。

在任何应用程序中，多个组件都依赖于同一个状态。让我们假设来自不同组件的多个动作想要改变相同的状态。为了克服这些挑战，Vuex帮助我们维护整个应用程序的状态。

在本文中，我将指导您在TypeScript 中实现一个 Vuex 模块，然后使用 Jest 对其进行单元测试。本教程的完整代码可在vuex-test GitHub 存储库中获得；随意分叉它。让我们开始吧！

• 什么是 Vuex？

• 创建一个 Vuex 模块

• 初始化测试

• 测试动作

• 测试吸气剂

• 测试突变

什么是 Vuex？

Vuex 是Vue 应用程序的状态管理模式和库，允许您在应用程序中使用集中状态管理，帮助您利用类似 Flux 的架构。Vuex store包含四个核心概念：

1. 状态

2. 吸气剂

3. 突变

4. 行动

状态对象包含您希望在存储中拥有的数据，包括您的所有应用程序级状态，作为唯一的事实来源。状态中定义的属性可以是任何数据类型，包括字符串、数字、对象或数组。

如果您想根据存储状态获得派生状态，例如，计算项目列表、过滤集合或在其他模块或组件中使用相同的派生状态集，您可以定义 getters。

另一方面，突变是我们改变状态的唯一方法。突变总是同步的，有效载荷是可选的。您可以通过提交，即MUTATION_NAME或payload. 始终建议从动作中调用突变。

动作可以执行异步操作并提交突变。动作处理程序接收一个上下文对象，该对象在存储实例上公开相同的方法或属性集。

您可以使用and来获取状态并调用突变。您可以使用和调用动作处理程序，它们是从商店中的其他动作调用的。context.getterscontext.statecontext.commitaction-namepayload

Vuex 架构

创建一个 Vuex 模块

随着应用程序大小的增加，您的商店可能会变得臃肿。为了防止这种情况，Vuex 允许您将 store 拆分为 modules。每个模块都可以包含自己的状态、getter、突变和动作。

---

超过 20 万开发人员使用 LogRocket 来创造更好的数字体验了解更多 →

---

例如，让我们创建一个用于管理待办事项列表的应用程序。首先，新建一个待办事项模块，负责获取所有待办事项并根据需要更新状态。

我们的目标是为中大型应用程序构建模块，因此，最好将突变类型、称为函数的操作和模块实现拆分到单独的文件中：

• mutation-types.ts: 包含所有函数名

• actions.ts: 负责所有异步操作

• index.ts: 模块实现

从“@/types/todo”导入 { IToDo }； { IToDo }来自“@/types/todo” ；    
从'vuex-module-decorators'导入{Module，VuexModule，Mutation࿰