Vue2+Jest单元测试报错：Cannot read properties of undefined (reading 'dispatch')

问题描述 #

我正在做学校项目，需要在Vue2代码库编写单元测试。我没接触过Vue2和Jest，但熟悉JavaScript。参考Jest自动生成的示例写了个简单测试：

import { shallowMount } from "@vue/test-utils";
import Login from "@/components/authentication/Login.vue";

describe("Login.vue", () => {
    it("renders props.msg when passed", () => {
        const msg = "new message";
        const wrapper = shallowMount(Login, {
        propsData: { msg }
        });
        expect(wrapper.text()).toMatch(msg);
    });
});

运行后出现报错：

Cannot read properties of undefined (reading 'dispatch')
TypeError: Cannot read properties of undefined (reading 'dispatch')

我怀疑是shallowMount的问题，虽然见过类似报错和Vuex有关，但感觉不是我的情况，请求帮助。

解决方案 #

这个报错和shallowMount无关，本质是你的Login组件里调用了this.$store.dispatch，但测试环境中没有注入Vuex store，导致$store为undefined。下面是几种解决方法：

• 方案1：测试用例内手动注入mock store
  直接在当前测试里创建一个包含dispatch方法的模拟store，注入到组件中：

  import { shallowMount } from "@vue/test-utils";
  import Login from "@/components/authentication/Login.vue";
  
  describe("Login.vue", () => {
      it("renders props.msg when passed", () => {
          const msg = "new message";
          // 用jest.fn()创建空的dispatch模拟函数
          const mockStore = {
              dispatch: jest.fn()
          };
          const wrapper = shallowMount(Login, {
              propsData: { msg },
              // 通过mocks注入$store
              mocks: {
                  $store: mockStore
              }
          });
          expect(wrapper.text()).toMatch(msg);
      });
  });
  

• 方案2：全局配置mock store（适合多组件测试）
  如果多个测试用例都需要用到Vuex，可以在测试入口文件（比如jest.setup.js）里全局注册mock store：

  import Vue from 'vue';
  import Vuex from 'vuex';
  
  Vue.use(Vuex);
  
  // 全局挂载模拟的store
  global.$store = {
      dispatch: jest.fn(),
      commit: jest.fn(),
      state: {}
  };
  

  然后在jest.config.js中配置这个setup文件：

  module.exports = {
      setupFiles: ['./jest.setup.js']
  };
  

• 方案3：模拟dispatch的具体行为（如需验证逻辑）
  如果你的测试需要验证dispatch的调用情况或返回值，可以给mock函数添加具体实现：

  const mockStore = {
      // 模拟dispatch返回成功结果
      dispatch: jest.fn().mockResolvedValue({ code: 200, data: '登录成功' })
  };
  // 测试后可以断言dispatch是否被正确调用
  expect(mockStore.dispatch).toHaveBeenCalledWith('login/handleLogin', 预期参数);
  

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