时间戳

首页 > 解决方案 > 使用 jest 和 vue-test-utils2 在 vue3 typescript 单元测试中模拟 axios（已解决）

unit-testing - 使用 jest 和 vue-test-utils2 在 vue3 typescript 单元测试中模拟 axios（已解决）

问题描述

我的组件调用

this.axios.get()

当被挂载并将 vuex-store 变量传递给 api 时。api 返回一个数组作为响应，组件在将加载元素与真实内容交换后显示一些返回的数据。

在我的单元测试中，我想模拟 axios-request 的结果，等待加载和内容元素之间的转换，然后最后检查内容的有效性。但是，测试失败并输出：

Cannot read property 'get' of undefined

并突出显示 this.axios 上的 get。

这是我期望的工作（基于本指南）：

... some imports etc. ...
const mockAxios = { whatIExpectToGet  };
jest.mock("axios", () => ({
  get: jest.fn(() => mockAxios)
}));
it("description of the test", async () => {
  const wrapper = mount(MyComponent);
... code continues ...

当然，我是通过这个访问 axios，而不是像他们在指南中那样直接访问。但是，由于我找不到任何与此相关的内容，我认为这无关紧要吗？

我也尝试像这样模拟 axios：

... imports etc. ...
const axios = {
  get: Promise.resolve({ whatIExpectToGet })
};
it("description of the test", async () => {
  const wrapper = mount(MyComponent, {
    global: {
      mocks: [ axios ]
    }
  });
... code continues ...

显然有类似问题的人使用 localVue.use() 来注入东西，但这不再受支持。

有人可以这么善良和聪明，给我指出正确的方向吗？谢谢你。

-------------------> 解决方案 <-------------------

感谢tony 19 ，这个问题已经解决了。

我最终使用异步函数来模拟 axios，因为Promise.resolve()它不适合我：

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

describe("MyComponent.vue", () => {
  const axios = {
    get: async () => ({
      data: { expectedData }
    })
  };
  it("test description", async () => {
    const wrapper = shallowMount(MyComponent, {
      global: {
        mocks: {
          axios: axios
        }
      }
    } as any);
    expect(wrapper.html()).toContain("some_string_i_display_while_loading");
    await flushPromises();
    expect(wrapper.html()).toContain("some_string_i_display_after_getting_the_response");
  });
});

标签： unit-testingvue.jsjestjsaxiosvue-test-utils

解决方案

使用global.mocksto mockaxios是正确的方法，但是当它应该是一个对象时，您的尝试错误地使用了一个数组：

const wrapper = mount(MyComponent, {
  global: {
    // mocks: [ axios ] ❌
    mocks: { axios } ✅
  }
})

Noteaxios.get()解析为一个axios.Response对象，该对象将响应数据存储在其data属性中，因此您的模拟应该做同样的事情。

这是一个完整的例子：

// MyComponent.vue
export default {
  mounted() {
    this.axios.get('foo').then(resp => this.foo = resp.data)
  }
}

// MyComponent.spec.js
it('gets foo', () => {
  const wrapper = mount(MyComponent, {
    global: {
      mocks: {
        axios: {
          get: Promise.resolve({ data: { foo: true }})

          // OR use an async function, which internally returns a Promise
          get: async () => ({ data: { foo: true }})
        }
      }
    }
  }
})

推荐阅读