TypeError: (0 , _axios.default) is not a function when use jest.mock('axios') inside a *.test.js file

Question

I try to mock axios module inside my test file like this

// mycomponent.test.js
import axios from 'axios';

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

But after i add jest.mock('axios') into my test file, i got an error like this.

TypeError: (0 , _axios.default) is not a function

      55 |       this.props.updateGlobalLoading(true);
      56 | 
    > 57 |       axios({
         |       ^
      58 |         method: 'get',
      59 |         url: '/v1/api/portal-xml-list',
      60 |       }).then((res) => {

So how should i fix this, any thing that i missed to set for axios mocking?

Thanks!

Answer 1

If you want to mock the default and named exports of a module (axios in this case), the property __esModule must be enabled in the return value:

jest.mock('axios', () => ({
    __esModule: true,
    get: jest.fn(() => Promise.resolve({ data: 'data' })),
    default: jest.fn(() => Promise.resolve({ data: 'data' })),
}));

Alternatively, as it seems that you are only using the default export of axios, you could mock the default export as:

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

Answer 2

As a follow up to @mgarcia's answer, I kept getting the following error when using his/her version:

ReferenceError: The module factory of `jest.mock()` is not allowed to reference 
any out-of-scope variables.
Invalid variable access: jest

The error was caused by the jest.fn() method inside jest.mock(). So I just removed it like so and was able to mock axios successfully:

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