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

Posted 2023-02-22

【中文标题】如何模拟 axios API 调用？开玩笑

【英文标题】：How can I mock axios API calls? with using jest

【发布时间】：2020-03-15 00:10:11

【问题描述】：

您好，我正在测试我的 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)
  )

)

【参考方案1】：

你使用了jest.mock('axios')，它会自动为模块生成模拟，它会为axios.get创建jest.fn()，但除非你另有说明，否则它将返回undefined

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

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

或简写：

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

同时检查this answer

【讨论】：

但它一直向我显示像这样的错误 TypeError: _axios.default.get.mockResolvedValue is not a function..

@Erika 可能是因为你删除了jest.mock('axios');

【参考方案2】：

我正在使用 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' ));