使用inject注入服务的Vue组件Jest单元测试Mock与setData失效问题

问题根因 #

你访问数据的方式存在错误：wrapper.vm.$options.data() 是组件定义时的原始数据工厂函数，每次调用都会返回全新的初始值对象，和组件实例当前运行时的响应式数据没有关联，你就算用setData修改了实例数据，调用这个原始工厂拿到的永远是初始的空数组。

修复方案 #

1. 核心修改：调整数据读取逻辑 #

要读取组件实例当前的响应式数据，直接访问 wrapper.vm.infos 即可，不需要通过$options调用原始data工厂。

2. 可选优化：对齐实际业务的Mock写法 #

如果你的my-component.vue是通过inject: ['myService']注入服务，实际业务中是调用this.myService.getAllInfos()获取数据，可以把Mock结构调整得和真实调用逻辑对齐，更符合单元测试的模拟原则。

修正后的完整测试代码 #

import { mount } from "@vue/test-utils";
import MyComponent from "./my-component.vue";
import getAllInfos from "./mock";

describe("MyComponent", () => {
  it("returns the correct value for getAllInfos() method", () => {
    // 用jest.fn包装mock方法，方便后续校验调用次数、参数等
    const mockGetAllInfos = jest.fn(getAllInfos);
    const wrapper = mount(MyComponent, {
      provide: {
        // 直接mock注入的myService对象，和实际业务调用结构完全对齐
        myService: {
          getAllInfos: mockGetAllInfos
        }
      }
    });

    const test = wrapper.vm.myService.getAllInfos();
    console.log("test = ", test);

    wrapper.setData({ infos: test });
    // 直接访问实例上的响应式属性infos
    console.log("infos = ", wrapper.vm.infos);

    expect(wrapper.vm.infos).toEqual([
      {"id": "myId", "name": "myName"}
    ]);
    // 额外可校验mock方法是否被正确调用
    expect(mockGetAllInfos).toHaveBeenCalled();
  });
});

如果你只想修复原有代码的报错，只需要把第三个console.log和断言的取值逻辑替换为wrapper.vm.infos即可。

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