Unit testing a react component using Axios without any mock adapter library

Axios library is used to fetch the data. Usually in react components, we use the Axios library to do the data fetching part. Unit testing the data fetch part is very important so that both the success and the error condition are handled and tested.

Here is a sample React component that uses the Axios library in the lifecycle. We are going to fetch the response, get the name from the response, and set the state variable in the success condition.

import React, { Component } from 'react';
import axios from 'axios';

class MockComponent extends Component{
  state = {
    name: '',
    error: false
  }

  componentDidMount(){
    axios({
      url: '/',
      method: 'POST'
    }).then((data)=>{
      console.log('data',data)
      const { name } = data;
      this.setState({
        name
      })
    }).catch(()=>{
      this.setState({
        error: true
      })
    })
  }

  render(){
    const { name, error } = this.state;
    if(error){
      return (
        <div>
          Error fetching data
        </div>
      )
    }
    return (
      <div>
        This is a mock component {name}
      </div>
    )
  }
}

export default MockComponent;

In case of error, we are going to set the error state as true, which will render the generic error text.

Installing the react testing library

Now we are going to use the react testing library to test the above component. If you do not have the testing library installed, then install the dev dependency by running the command below.

npm install --save-dev @testing-library/react

Now we have the react testing library installed. Let us start writing the unit test case for the above component.

Mocking the Axios library

We have to mock the axios library so that we can control the success and error condition and it can be easily reproduced in the test case. The axios library is a es6 module, so we are going to mock it as follows.

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

In the above code, we have mocked the axios library using jest.mock. jest.mock accepts a callback function, where we can define the properties of the axios library. Because it is an es6 module, we have returned __esModule as true. We have to also implement the default export of the axios library as we are using the default import in our MockComponent.

We have assigned a mock function to the default export of Axios, because we are going to spy on it and return the resolved value or rejected value in the test case as follows

Returing the resolved value

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

Returning the rejected value

const axios = require('axios');
jest.spyOn(axios, 'default').mockRejectedValue()

Writing the unit test case

We have now understood how to mock the Axios library and control it by spying on the Axios library and returning the resolved or rejected value as per our test case. So let us write the unit test case for success condition.

const wrapper = render(<MockComponent>);