Vuex配合Jest测试时报错但store内函数实际执行正常是什么原因？

报错的核心原因和修复方案 #

1. 第一个测试用例断言路径错误 #

触发toggleAuth mutation后的断言缺少子模块层级：
你写的是：

expect(store.state.userLoggedIn).toBe(true)

但auth是注册在modules下的子模块，状态挂载在store.state.auth下，正确写法应该是：

expect(store.state.auth.userLoggedIn).toBe(true)

路径错误会导致读取到undefined，抛出预期值不匹配的错误。

2. login action存在测试环境不兼容逻辑 #

你在login action commit状态后执行了window.location.reload()：

• 实际浏览器运行时，刷新页面后你应该会在项目初始化阶段从firebase同步登录状态，所以功能看起来正常
• 但在Jest测试环境中，window.location.reload()要么执行报错，要么会重置当前测试的上下文，导致commit修改的userLoggedIn状态被清空，第二个测试断言会失败。

3. toggleAuth mutation写法不符合Vuex规范 #

Vuex的mutation函数第一个入参默认是当前模块的state对象，你当前用this.state访问状态的写法强依赖Vuex运行时的this绑定，克隆模块后的测试环境下容易出现this指向异常，导致状态修改失败。建议改成官方推荐写法：

toggleAuth(state) {
  state.userLoggedIn = !state.userLoggedIn;
}

临时修复测试的补充操作 #

如果不想改动业务逻辑，可以在测试用例中mock掉reload方法避免干扰：

jest.spyOn(window.location, 'reload').mockImplementation(() => {})

内容的提问来源于stack exchange，提问作者Alan