VueJS Jest测试Ajax调用（axios）

Question

我将在第一页加载中测试更新的数据images，我通过一种方法将其称为ajax。我为ajax调用进行了测试模拟，但仍然失败，这是我的测试：

Main.vue

<template>
  <div id="app">
    <HelloWorld msg="Basic App"/>
  </div>
</template>

HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <div v-if="images.length > 0" class="img-container">
      <img
        loading="lazy"
        width="300"
        height="300"
        v-for="(item, idx) in images"
        :src="item.url"
        :key="idx"
      />
    </div>
    <br />
    <button v-on:click="refreshImg()">Refresh</button>
  </div>
</template>

<script>
import axios from "axios";
export default {
  props: {
    msg: String
  },
  data: function() {
    return {
      images: []
    };
  },
  mounted() {
    this.apiFetch();
  },
  methods: {
    apiFetch() {
      axios
        .get("https://api.thecatapi.com/v1/images/search")
        .then(val => (this.images = val.data));
    },
    refreshImg() {
      this.apiFetch();
    }
  }
};
</script>

HelloWorld.spec.js

import { mount, shallowMount } from "@vue/test-utils";
import HelloWorld from "../HelloWorld.vue";

const $axios = {
  get: () => {
    return Promise.resolve({
      data: [
        {
          breeds: [],
          id: "MTY0Njk3MQ",
          url: "https://cdn2.thecatapi.com/images/MTY0Njk3MQ.jpg",
          width: 400,
          height: 426
        }
      ]
    });
  }
};

describe("HelloWorld.vue", () => {
  let wrapper;

  test("renders header when passed msg prop as string", () => {
    const msg = "new header";
    wrapper = mount(HelloWorld, {
      propsData: { msg }
    });

    expect(wrapper.contains("h1")).toBe(true);
    expect(wrapper.props().msg).toBe("new header");
    expect(wrapper.text()).toMatch(msg);
  });

  test("renders an image when button is clicked", () => {
    const images = [
      {
        breeds: [],
        id: "XrrbdqDvw",
        url: "https://cdn2.thecatapi.com/images/XrrbdqDvw.jpg",
        width: 1138,
        height: 1138
      }
    ];

    const refreshImg = jest.fn();
    wrapper = mount(HelloWorld, {
      data() {
        return { images };
      }
    });

    wrapper.setMethods({ refreshImg });
    wrapper.find("button").trigger("click");

    expect(refreshImg).toHaveBeenCalled();
    expect(wrapper.find(".img-container").isVisible()).toBe(true);
    expect(wrapper.find(`img[src="${images[0].url}"]`).isVisible()).toBe(true);
  });

  test("renders image container on the first load", () => {
    // === test failed here! ===
    wrapper = mount(HelloWorld, { mocks: { $axios } });
    expect(wrapper.find(".img-container").exists()).toBe(true);
  });

  // == UPDATE ==
  test('renders image container on the first load', async () => {
    const result = await $axios.get();

    const wrapper = shallowMount(HelloWorld, {
      data() { return { images: result.data } }
    });

    expect(wrapper.vm.$data.images).toHaveLength(1);
  });
});

我试图在wrapper.vm.$data.images测试用例中检查renders image container on the first load，但images仍然为空。我做错了吗？