Learn complete example for mocking axios without using mock library or adapter
The below tutorial only explains you how to mock axios using a mock library. If you prefer to use only jest to mock axios, please refer to following tutorial Unit testing a react component using axios without any mock adapter or library

React Jest provides the methods to mock the library like manual mocks, es6 class mocks. Axios library is used to fetch the data in the React component.

We should not make the http calls inside the unit test files. It helps to test both the success and error conditions of the api calls and subsequent component functionality. That is why it is better to mock the axios library.

Mocking axios library

We can mock the axios library using the jest.mock() function and prividing a mock factory method.

Because axios is an es6 class, we have to implement the default method in our mock factory function.

Below is the sample code to mock the axios library.

jest.mock('axios', () => {
  return {
    __esModule: true,
    default: jest.fn()
  }
});

We can mock other methods of axios library like axios.get, axios.post by implementing them inside the mock factory function.

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

Using the mock axios inside the test case

Once we have mocked the axios library in our test case, we can use the mocked library to return the resolved response or the rejected error response for the api call.

We are going to require the axios library in our test case, and provide a mock implementation.

const axios = require('axios');
jest.spyOn(axios, 'default').mockResolvedValue({
  name: 'abc'
})

In the above code snippet, we are returning the resolved value (ie the Promise is resolved with the data {name : abc}

We can also reject the data in similar fashion.

jest.spyOn(axios, 'default').mockRejectedValue()
Learn complete example for mocking axios without using mock library or adapter
The below tutorial only explains you how to mock axios using a mock library. If you prefer to use only jest to mock axios, please refer to following tutorial Unit testing a react component using axios without any mock adapter or library
Learn complete example for mocking axios without using mock library or adapter
The below tutorial only explains you how to mock axios using a mock library. If you prefer to use only jest to mock axios, please refer to following tutorial Unit testing a react component using axios without any mock adapter or library

React Jest provides the methods to mock the library like manual mocks, es6 class mocks. Axios library is used to fetch the data in the React component.

We should not make the http calls inside the unit test files. It helps to test both the success and error conditions of the api calls and subsequent component functionality. That is why it is better to mock the axios library.

Mocking axios library

We can mock the axios library using the jest.mock() function and prividing a mock factory method.

Because axios is an es6 class, we have to implement the default method in our mock factory function.

Below is the sample code to mock the axios library.

jest.mock('axios', () => {
  return {
    __esModule: true,
    default: jest.fn()
  }
});

We can mock other methods of axios library like axios.get, axios.post by implementing them inside the mock factory function.

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

Using the mock axios inside the test case

Once we have mocked the axios library in our test case, we can use the mocked library to return the resolved response or the rejected error response for the api call.

We are going to require the axios library in our test case, and provide a mock implementation.

const axios = require('axios');
jest.spyOn(axios, 'default').mockResolvedValue({
  name: 'abc'
})

In the above code snippet, we are returning the resolved value (ie the Promise is resolved with the data {name : abc}

We can also reject the data in similar fashion.

jest.spyOn(axios, 'default').mockRejectedValue()
Learn complete example for mocking axios without using mock library or adapter
The below tutorial only explains you how to mock axios using a mock library. If you prefer to use only jest to mock axios, please refer to following tutorial Unit testing a react component using axios without any mock adapter or library