为什么TypeError:axios.create不是函数? 测试axios GET时

Why TypeError: axios.create is not a function? When testing axios GET

我正在尝试在React中测试我的axios API函数。

在这里发现了这个问题:我如何用指向axios-mock-adapter的笑话来测试axios

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
import chatbot from './chatbot';

describe('Chatbot', () => {
    it('returns data when sendMessage is called', done => {
        var mock = new MockAdapter(axios);
        const data = { response: true };
        mock.onGet('https://us-central1-hutoma-backend.cloudfunctions.net/chat').reply(200, data);

        chatbot.sendMessage(0, 'any').then(response => {
            expect(response).toEqual(data);
            done();
        });
    });
});

真正的功能:

1
2
3
4
5
6
7
8
/**
 * Retrieve all Akamai images
 * @param  {String} akamai Akamai url
 * @return {Thenable}      Resolved: Akamai images
 */
export const callGetAkamai = () =>
  makeRequest('/akamai', 'GET')
    .catch(defaultCatch('callGetAkamai'));

我的测试:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
import { callGetAkamai } from './api';

describe('GetAkamai', () => {
  it('returns data when callGetAkamai is called', (done) => {
    console.log('MockAdapter', MockAdapter);
    const mock = new MockAdapter(axios);
    // const mock = axios.create({
    //   baseURL: 'https://us-central1-hutoma-backend.cloudfunctions.net/chat/'
    // });

    const data = { response: true };
    mock.onGet('https://us-central1-hutoma-backend.cloudfunctions.net/chat').reply(200, data);

    callGetAkamai().then((response) => {
      expect(response).toEqual(data);
      done();
    });
  });
});

enter image description here


您是否在嘲笑axios?我自己遇到了这个问题,在所有错误的地方查看后,我意识到我已经在用jest嘲笑axios

将以下代码段放入setupTestFrameworkScriptFile中:

1
2
3
4
5
6
7
8
9
10
11
const mockNoop = () => new Promise(() => {});

// Notice how `create` was not being mocked here...
jest.mock('axios', () => ({
  default: mockNoop,
  get: mockNoop,
  post: mockNoop,
  put: mockNoop,
  delete: mockNoop,
  patch: mockNoop
}));

虽然您可能同时做到这两个,但是如果您使用的是axios-mock-adapter,则可能要删除其他模拟(并跳过上面的代码段)。


由于这是google在该问题上的第一个热门内容,因此将其添加到此处,选择的答案并不能真正回答问题。

当您已经在模拟axios(通常在__mocks__文件夹中)时,通常会发生此问题。

通过开玩笑,您可以显式取消模拟,然后将其称为axios-mock-adapter

1
2
3
4
jest.unmock('axios');
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
...

当处理外部请求时,axios-mock-adapter提供了很好的,灵活的api。但是,这并不能全局阻止您的应用发出由其他组件中的测试触发的外部调用。

因此,我发现使用axios-mock-adapter和在__mocks__文件夹中进行手动模拟都同样有用。