直接测试 mutation 和 action 是可行的，关键在于把它们当作普通函数来对待：mutation 纯同步、无副作用；action 虽常含异步逻辑，但可通过依赖注入和 mock 剥离外部调用。
直接测试 Mutation 和 Action 是可行的，关键在于把它们当作普通函数来对待——Mutation 纯同步、无副作用；Action 虽常含异步逻辑，但可通过依赖注入和模拟（mock）剥离外部调用。
测试 Mutation：只需传入 state 和 payload
Mutation 本质是接收 state 和 payload 的纯函数，不依赖 Vue 实例或 store 实例，因此测试非常轻量。
- 确保 mutation 是命名导出（如 export const mutations = { ... }），方便单独引入测试
- 构造初始 state 对象，调用 mutation 函数，再断言 state 是否按预期修改
- 避免在测试中 import 整个 store，只导入对应 mutation 即可，保持隔离性
- 例如：SET_USER 应将 user 对象写入 state.users，并把 id 推入 state.userIdList —— 测试就检查这两处是否更新
测试 Action：重点模拟外部依赖与 commit 行为
Action 通常触发异步操作（如 API 请求）并 commit mutation，所以测试需绕过真实网络调用，聚焦逻辑流程。
- 用 mock 替换实际 API 模块（如 ../api/user），返回预设数据或延时响应
- 传入一个伪造的 context 对象（含 commit、dispatch、state），捕获 commit 调用的类型和 payload
- 对异步 action，使用 async/await 或 done 回调 等待 Promise 完成后再断言
- 若 action 返回 Promise（如调用后返回结果），测试中应 await 并验证返回值是否符合预期
辅助工具建议：简化断言与上下文构造
手动构造 context 和反复校验 commit 调用容易出错，可用轻量辅助函数提升可读性与复用性。
- 写一个 testAction 工具函数：接收 action、参数、初始 state、期望 commit 列表，自动执行并比对
- 用 jest.mock 或 inject-loader（Webpack 场景）实现模块级依赖替换
- 对带命名空间的模块 action，注意 commit 时 type 需加前缀（如 'user/SET_PROFILE'），测试中要严格匹配
- 避免在测试中启动完整 Vuex 实例——单元测试目标是函数行为，不是 store 集成效果
常见陷阱提醒
有些看似合理写法反而让测试变脆弱或失效。
- 在 store.js 中只 default 导出 store 实例，未命名导出 mutations/actions → 导致无法单独测试内部函数
- action 内直接调用 fetch 或 axios.get，未抽成可替换的服务层 → 无法 mock 网络请求
- 测试时用 this.$store.commit 调用 mutation → 引入了 Vue 实例和 store 实例，失去单元测试意义
- 忽略异步时机，比如没等 setTimeout 或 Promise resolve 就做断言 → 断言提前执行，结果不可靠
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
