在 VueJS 上使用 Jest 模拟 .get() 函数

如何解决在 VueJS 上使用 Jest 模拟 .get() 函数

我正在尝试模拟 GET 请求以使用 ID 获取一些帖子。这是我试图模拟的代码：

getPost() {
  this.refreshToken();
  http
    .get(`/posts/${this.$cookie.get('postid')}`,{
      headers: {
        "Authorization": `Bearer ${this.$cookie.get('token')}`,"Content-type": "application/json",},})
    .then((response) => {
      this.post = response.data;
    })
    .catch((error) => {
      console.log(error.response);
    });
}

这是我的测试尝试：

import {getPost} from '@/views/Post.vue'
import axios from 'axios';

jest.mock('axios');

describe('get Post by ID',() => {
  afterEach(() => {
    jest.resetAllMocks();
  });

  it('should return empty when axios.get Failed',async () => {
    const getError = new Error('error');
    axios.get = jest.fn().mockRejectedValue(getError);
    const actualValue = await getPost();
    expect(actualValue).toEqual(new Map());
    expect(axios.get).toBeCalledWith('/posts/postid');
  });

  it('should return users',async () => {
    const mockedUsers = [{ postID: 1 }];
    axios.get = jest.fn().mockResolvedValue(mockedUsers);
    const actualValue = await getPost(['1']);
    expect(actualValue).toEqual(mockedUsers);
    expect(axios.get).toBeCalledWith('/posts/postid');
  });
})

我得到的错误是：

TypeError: (0,_Post.getPost) is not a function

我不知道该怎么做，任何帮助将不胜感激。谢谢！

解决方法

假设您在 getPost() 组件的 Post 中定义了 methods，您不能使用命名导入来访问 getPost。相反，您必须安装组件，并使用 wrapper's vm:

// Post.spec.js
import { shallowMount } from '@vue/test-utils'
import Post from '@/views/Post.vue'

it('...',() => {
  const wrapper = shallowMount(Post)
  await wrapper.vm.getPost()
  expect(wrapper.vm.post).toEqual(...)
})

还要确保在 axios 中返回 getPost() 调用，以便它可以被await编辑：

// Post.vue
export default {
  methods: {
    getPost() {
      this.refreshToken();
        ?
      return http.get(/*...*/)
        .then(/*...*/)
        .catch(/*...*/);
    }
  }
}