时间戳

首页 > 解决方案 > 如何使用 jest 在 vuejs 中测试 API 调用？

javascript - 如何使用 jest 在 vuejs 中测试 API 调用？

问题描述

我在使用 axios 进行 API 调用的组件中有这个方法，我检查了有关如何测试它的文档，但我似乎无法弄清楚如何去做。任何帮助，将不胜感激。

loadContents() {
  axios.get('/vue_api/content/' + this.slug).then(response => {
    this.page_data = response.data.merchandising_page
  }).catch(error => {
    console.log(error)
  })
},

标签： javascriptunit-testingvue.jsvuejs2jestjs

解决方案

您可以使用moxios或axios-mock-adapter自动模拟 Axios 请求。对于开发人员的人体工程学，我更喜欢后者。

考虑这个UserList使用 Axios 获取用户数据的组件：

// UserList.vue
export default {
  data() {
    return {
      users: []
    };
  },
  methods: {
    async loadUsers() {
      const { data } = await axios.get("https://api/users");
      this.users = data;
    }
  }
};

使用axios-mock-adapter，相关测试将 AxiosGET请求存根到 API URL，而是返回模拟数据：

import axios from "axios";
const MockAdapter = require("axios-mock-adapter");
const mock = new MockAdapter(axios);

import { shallowMount } from "@vue/test-utils";
import UserList from "@/components/UserList";

describe("UserList", () => {
  afterAll(() => mock.restore());
  beforeEach(() => mock.reset());

  it("loads users", async () => {
    mock
      .onGet("https://api/users")
      .reply(200, [{ name: "foo" }, { name: "bar" }, { name: "baz" }]);

    const wrapper = shallowMount(UserList);
    await wrapper.vm.loadUsers();
    const listItems = wrapper.findAll("li");
    expect(listItems).toHaveLength(3);
  });
});

演示

推荐阅读