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

Question

I'm trying to test my axios API functions in React.

Found this question here: how do i test axios in jest which pointed to using axios-mock-adapter

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();
        });
    });
});

---

The real function:

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

My test:

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();
    });
  });
});

Answer 1

Adding this here since it's the first hit on google to the question and the answer selected doesn't really answer the question.

This problem typically happens when you are already mocking axios (very likely within a __mocks__ folder.

With jest, you can explicitly unmock, then call this axios-mock-adapter.

jest.unmock('axios');
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
...

axios-mock-adapter gives nice, flexible apis when working with external requests. However it doesn't globally prevent your app from making external calls that can be triggered by a test in a different component.

So I found both using axios-mock-adapter and doing a manual mock in the __mocks__ folder equally helpful.

Answer 2

Are you mocking axios already? I have run into this issue myself, and after looking in all the wrong places, I realized I was already mocking axios with jest.

Put the following snippet in your setupTestFrameworkScriptFile:

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
}));

While you might be able to do both, if you are using the axios-mock-adapter, you might want to remove your other mocks (and skip the snippet above).