如何模拟 axios API 调用？用玩笑

Question

嗨，我正在测试我的 vuex 动作异步函数，它通过 axios 调用 api，但我有一些问题，它显示这样的错误“类型错误：无法解构data‘未定义’或‘空’的属性。

  35 |     commit('storeSearchValue', name);
  36 |     const url = process.env.VUE_APP_URL_API_News + '/news' + '?q=' + name;
> 37 |     const { data } = await axios.get(url);"

我的 vue js 代码是

 async updateSearchValue({ commit }, name) {
    commit('storeSearchValue', name);
    const url = process.env.VUE_APP_URL_API_News + '/news' + '?q=' + name;
    const { data } = await axios.get(url);
    commit('storeNewsData', data.result);
  },

这是测试文件，

import actions from '@/store/modules/data/data-actions.js'
import VueRouter from 'vue-router';
import axios from 'axios';

import {
  createLocalVue
} from '@vue/test-utils';
const localVue = createLocalVue();
localVue.use(VueRouter);
jest.mock('axios');

describe('', () => {
  test('updateSearchValue', async () => {
    const commit = jest.fn()
    const name = jest.fn()

    await actions.updateSearchValue({
      commit,
      name
    })

    expect(commit).toHaveBeenCalledWith('updateSearchValue', name)
  })

})

Answer 1

我正在与 jest 和 TS 合作并尝试这样做：

axios.get.mockReturnValue...

或者：

axios.get.mockImplementationOnce...

返回以下错误：

TypeError: mockedAxios.get.mockImplementationOnce is not a function

最终对我起作用的是：

import axios from 'axios';

jest.mock('axios');

axios.get = jest.fn()
            .mockImplementationOnce(() => Promise.resolve({ data: 'mock data' }));

Answer 2

您已经使用jest.mock('axios')which 为模块自动生成模拟，它将为 创jest.fn()build axios.get，但undefined除非您另有说明，否则它将返回

由于您希望它返回带有data属性的对象的已解析承诺，因此您可以使用：

axios.get.mockReturnValue(Promise.resolve({
  data: 'mock data'
});

或简写：

axios.get.mockResolvedValue({ data: 'mock data' });

也检查这个答案