模拟请求测试组件（FetchMockTest.vue）

<template>
  <button @click="fetchResults">{{ value }}</button>
</template>

<script>
  import axios from "axios";
  //
  export default {
    data() {
      return {
        value: null,
      };
    },

    methods: {
      async fetchResults() {
        const response = await axios.get("/custom");
        this.value = response.data;
      },
    },
  };
</script>

模拟请求测试（FetchMockTest.spec.js）

// src/components/__tests__/FetchMockTest.spec.js
import { shallowMount } from "@vue/test-utils";
import flushPromises from "flush-promises";
import axios from "axios";
import FetchMockTest from "../JestTest/FetchMockTest.vue";

jest.mock("axios");

describe("FetchMockTest", () => {
  // 按 URL 区分不同 get 请求
  axios.get.mockImplementation((url) => {
    switch (url) {
      case "/custom":
        return Promise.resolve({ data: "按钮文本" }); // 按钮接口数据
      case "/api/user":
        return Promise.resolve({ data: { name: "张三" } }); // 用户接口数据
      case "/api/list":
        return Promise.resolve({ data: [1, 2, 3] }); // 列表接口数据
      default:
        return Promise.resolve({ data: null }); // 默认数据
    }
  });
  /**
   * 测试异步数据获取：点击按钮后获取数据并渲染
   */
  it("异步数据获取：点击按钮后获取数据并渲染", async () => {
    const wrapper = shallowMount(FetchMockTest);
    await wrapper.find("button").trigger("click");
    await flushPromises();
    expect(wrapper.text()).toBe("按钮文本");
  });
});