真实接口请求测试组件（FetchRealApiTest.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>

真实接口请求测试（FetchRealApiTest.spec.js）

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

// 配置测试环境接口
axios.defaults.baseURL = "http://localhost:8080/";
// 添加请求拦截器：打印所有真实请求的地址
// axios.interceptors.request.use((config) => {
//   console.log("真实请求地址：", config.baseURL + config.url); // 打印完整 URL
//   console.log("请求方法：", config.method);
//   return config;
// });
describe("FetchRealApiTest", () => {
  /**
   * 真实接口请求：点击按钮后获取数据并渲染
   */
  it("真实接口请求：点击按钮后获取数据并渲染", async () => {
    // 1. 挂载组件
    const wrapper = shallowMount(FetchRealApiTest);
    // 2. 记录初始文本（确保初始状态正确）
    const initialText = wrapper.text();
    expect(initialText).toBe(""); // 假设初始文本为空

    // 3. 点击按钮触发真实接口请求
    await wrapper.find("button").trigger("click");

    // 4. 等待真实接口响应（关键：根据接口延迟调整等待逻辑）
    // 循环等待，直到数据渲染或超时（最多等10秒）
    let waitTime = 0;
    while (wrapper.text() === initialText && waitTime < 100) {
      await new Promise((resolve) => setTimeout(resolve, 100)); // 每100ms检查一次
      waitTime++;
    }

    // 5. 断言接口返回的数据已渲染（根据真实接口返回值调整）
    // 假设真实接口返回 { value: "真实数据" }，组件渲染该值
    expect(wrapper.text()).toContain("真实按钮"); // 用 toContain 兼容可能的其他文本
  });
});