使用 axios-mock-adapter 模拟 axios 得到未定义的响应答案

【问题标题】：Mock axios with axios-mock-adapter get undefined resp使用 axios-mock-adapter 模拟 axios 得到未定义的响应
【发布时间】：2021-12-10 22:23:01
【问题描述】：

我创建了一个 axios 实例...

// api/index.js

const api = axios.create({
  baseURL: '/api/',
  timeout: 2500,
  headers: { Accept: 'application/json' },
});
export default api;

还有几个模块使用它..

// api/versions.js

import api from './api';

export function getVersions() {
  return api.get('/versions');
}

我尝试像..一样进行测试

// Test
import { getVersions } from './api/versions';

const versions= [{ id: 1, desc: 'v1' }, { id: 2, desc: 'v2' }];
mockAdapter.onGet('/versions').reply(200, versions);

getVersions.then((resp) => { // resp is UNDEFINED?
  expect(resp.data).toEqual(versions);
  done();
});

为什么 resp 是未定义的？

【问题讨论】：

标签： unit-testing axios jestjs axios-mock-adapter

【解决方案1】：

这里有两件事要尝试：

也许您的代码中的其他地方已经有这个，但一定要设置 mockAdaptor：

import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';

const mockAdapter = new MockAdapter(axios);

当您正在测试的函数使用“axios.create”设置新的 axios 实例时，我还没有找到让模拟适配器工作的方法。尝试类似的方法：

// api/index.js

const api = {
  get(path) {
    return axios.get('/api' + path)
    .then((response) => {
        return response.data;
    });
  }
}
export default api;

【讨论】：

#1。我已经设置了这个。 #2。只需使用new MockAdapter(axiosInstanceHere); 无需这样做。
使用new MockAdapter(axios.create({timeout: 5000})) 不起作用。
我也有同样的问题。当创建与axios.create 的连接时，模拟适配器返回未定义。
非常感谢您让我走上正轨...我更新了 api.index.js，不再使用 axios.create ！我将根据您的建议使用正确的编码更新我的问题
非常感谢您让我走上正轨...我更新了 api.index.js，不再使用 axios.create ！我将根据您的建议使用正确的编码更新我的问题

【解决方案2】：

对于仍在为此苦苦挣扎的人。

您需要确保在测试机构之外初始化您的MockAdapter。

即。 ❌ 不正确 ❌

it('should do a thing', () => {
    const mockAdapter = new MockAdapter(axios);
})

✅ 正确 ✅

const mockAdapter = new MockAdapter(axios);

it('should pass' () => {})

【讨论】：

【解决方案3】：

根据 James M. 的建议，我更新了我的 api/index.js ，而不是使用 axios.create...

api/index.js

import http from 'axios'

export default {

  fetchShoppingLists: () => {
    console.log('API FETCH SHOPPINGLISTS')
    return http
      .get('http://localhost:3000/shoppinglists')
      .then(response => {
        return response
      })
      .catch(error => {
        console.log('FETCH ERROR: ', error)
      })
  }
}

【讨论】：

【解决方案4】：

您不需要axios-mock-adapter。这是我如何模拟我的axios：

// src/__mocks__/axios.ts

const mockAxios = jest.genMockFromModule('axios')

// this is the key to fix the axios.create() undefined error!
mockAxios.create = jest.fn(() => mockAxios)

export default mockAxios

【讨论】：