Vue3+TypeScript+Jest单元测试如何在shallowMount中注入模拟Vuex store

• 你当前使用的是适配Vue3的@vue/test-utils v2版本，该版本已经废弃了V1中的createLocalVue方法，旧版Vue2的测试写法无法直接复用
• 你的组件通过useStore()（Composition API方式）获取store实例，而非Options API中挂载到this的$store，因此用mocks注入$store的方案不生效
• TS重载报错的原因有两个：一是shallowMount配置参数不符合VTU2的类型定义，二是你给index传了数值0，但组件内声明index是String类型，类型不匹配

import { shallowMount } from "@vue/test-utils";
import ProjectItem from "@/components/ProjectItem.vue";
import { state } from "@/data/fakeStore/projects";
import Vuex from "vuex";
import { ProjectsGetters } from "@/store/projects/getters";

describe("ProjectItem.vue", () => {
  // 定义模拟getters，提前设置返回值
  const mockGetters = {
    [ProjectsGetters.projects]: jest.fn(() => state.projects),
    [ProjectsGetters.skills]: jest.fn(() => state.skills),
    [ProjectsGetters.skillsFromOneProject]: jest.fn(() => state.skills)
  };

  // 初始化Vuex4的store
  const fakeStore = new Vuex.Store({
    state,
    getters: mockGetters
  });

  it("check initialization data", () => {
    const wrapper = shallowMount(ProjectItem, {
      props: {
        // 组件声明index是String类型，传字符串格式的索引
        index: '0'
      },
      global: {
        // VTU2通过global.plugins注册全局插件
        plugins: [fakeStore]
      }
    });

    expect(wrapper.vm.projects).toEqual(state.projects);
    expect(wrapper.vm.skills).toEqual(state.skills);
    expect(wrapper.vm.index).toEqual('0');
    // 可以额外验证getter是否被正确调用
    expect(mockGetters[ProjectsGetters.skillsFromOneProject]).toHaveBeenCalledWith('0');
  });
});

如果你不需要测试Vuex的复杂逻辑，也可以直接mockuseStore方法，写法更简洁：

// 放在文件顶部，和import语句同级
import { useStore } from "vuex";
jest.mock('vuex', () => ({
  ...jest.requireActual('vuex'),
  useStore: jest.fn()
}));

// 在用例里给useStore设置返回值
it("check initialization data", () => {
  const mockStore = {
    getters: {
      [ProjectsGetters.projects]: state.projects,
      [ProjectsGetters.skills]: state.skills,
      [ProjectsGetters.skillsFromOneProject]: jest.fn(() => state.skills)
    }
  };
  (useStore as jest.Mock).mockReturnValue(mockStore);

  const wrapper = shallowMount(ProjectItem, {
    props: { index: '0' }
  });

  expect(wrapper.vm.projects).toEqual(state.projects);
})

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