Vue3+TS单测中基于Jest和Vue Test Utils2模拟this.axios.get调用的实现方案

问题表现 #

• 业务组件在挂载生命周期内，会通过this.axios.get()发起接口请求，请求参数取自Vuex存储的全局变量
• 接口返回数组形式的业务数据后，组件会完成加载态元素到实际业务内容的渲染切换
• 编写测试时预期模拟接口返回，等待组件完成状态切换后校验渲染正确性，但运行直接抛出Cannot read property 'get' of undefined，错误定位到组件内调用this.axios.get的代码行

常见踩坑点 #

• 照搬文档示例用jest.mock直接模拟axios模块：文档示例的场景是组件内直接import axios调用，和组件通过全局挂载的this属性调用axios的逻辑不匹配，模拟逻辑无法生效
• 手动构造axios实例时写法错误：
  • 把mocks字段写成数组结构传入，而非键值对对象
  • 直接把get方法赋值为已resolve的Promise实例，而非可调用的、返回Promise的函数，导致组件调用时实际拿到的是Promise对象，无法执行get方法
• 沿用旧版Vue Test Utils的localVue.use()做依赖注入：该API在Vue Test Utils2版本中已移除，无法正常生效

正确实现方式 #

通过mount配置的全局mock字段，给组件实例的this上下文注入和业务代码结构完全匹配的axios对象，用async函数实现get方法返回符合接口格式的模拟响应，搭配flushPromises等待所有异步流程完成后再开展断言。
可运行的测试代码参考：

import { shallowMount, flushPromises } from "@vue/test-utils";
import MyComponent from "@/components/MyComponent.vue";

describe("MyComponent.vue", () => {
  // 构造和业务侧this.axios结构完全一致的mock对象
  const axios = {
    get: async () => ({
      data: { /* 填入实际业务需要的模拟接口返回数据 */ }
    })
  };

  it("挂载后正确完成加载态到业务内容的渲染切换", async () => {
    const wrapper = shallowMount(MyComponent, {
      global: {
        // 以键值对形式注入全局mock，对应组件内this.axios的取值
        mocks: {
          axios
        }
      }
    });

    // 校验初始加载态的渲染内容
    expect(wrapper.html()).toContain("加载态占位标识文本");
    // 等待所有异步请求、组件状态更新流程执行完毕
    await flushPromises();
    // 校验接口响应完成后的实际业务渲染内容
    expect(wrapper.html()).toContain("接口返回后展示的业务内容文本");
  });
});

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