Mock axios error

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.

In this tutorial, we are going to mock the axios component by using the Jest framework itself. We are not going to use any external library to mock the axios library.

Mocking axios library

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

Axios is an es6 class, so mocking axios will be similar to mocking an es6 class in jest. We also 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()

Complete example of the mock of axios

Now, we are going to write a component which contains the axios code. Then we will write the unit test case for it by mocking the axios library using jest.

The sample component which we are going to write will be a simple React component, which will make a call to local server, and set the state from the response. If the api throws error, then the error state is set to true. Based upon the state value, then output is rendered. We are going to test both the success and error condition of axios.

Sample component is as follows

import { Component } from 'react';
import axios from 'axios';
import './App.css';
class App extends Component{
  state = {
    name: '',
    error: false
  }
  componentDidMount(){
    axios({
      url: 'http://localhost:3000',
    }).then((data)=>{
      const { name } = data;
      this.setState({
        name
      })
    }).catch(()=>{
      this.setState({
        error: true
      })
    })
  }
  render(){
    if(this.state.error){
      return "error";
    }
    return this.state.name;
  }
}
export default App;

In the above component, we import the dependencies of axios, react.

import { Component } from 'react';
import axios from 'axios';
import './App.css';

Then we declare the App component

class App extends Component{

We declare the state variable of name and error. Name will be displayed on success, error will be set when there is error in the axios call.

state = {
    name: '',
    error: false
  }

Then in the component lifecycle method, we call the api http://localhost:3000 to get the data. In the then block, we set the state of name. In the catch block, we set the error state boolean error.

 componentDidMount(){
    axios({
      url: 'http://localhost:3000',
    }).then((data)=>{
      const { name } = data;
      this.setState({
        name
      })
    }).catch(()=>{
      this.setState({
        error: true
      })
    })
  }

In the render function, we return the error message if error state is set, or else we return the name state.

render(){
    if(this.state.error){
      return "error";
    }
    return this.state.name;
  }

Writing unit test case for above sample component

The test case for the above component which mocks the axios and tests the success and error condition are as follows.

import React from 'react';
import axios from 'axios';
import { waitFor } from '@testing-library/dom';
import { render } from '@testing-library/react';
import App from './App';
jest.mock('axios');
beforeEach(()=>{
  jest.clearAllMocks()
})
test('show name', async () => {
  jest.spyOn(axios, 'default').mockResolvedValue({
    name: 'abc'
  })
  const wrapper = render(<App />);
  await waitFor(() => expect(wrapper.queryAllByText('abc')).toHaveLength(1));
});
test('show name error', async () => {
  jest.spyOn(axios, 'default').mockRejectedValue(()=>({}));
  const wrapper = render(<App />);
  await waitFor(() => expect(wrapper.container.innerHTML).toEqual('error'));
});

I am going to explain the above code one by one.

If you have written the unit test case before, then you will be familier with some of the code above.

beforeEach runs the callback function before every test. test contains the test.

Here we are going to focus on the mocking aspect.

We have imported the axios library from ‘axios’ dependency. Then we have mocked the library using jest.mock. This will replace the methods of axios with mock methods.

import axios from 'axios';
...
jest.mock('axios');

After mocking the axios library, we can spy on it and provide our own implementation for the methods.

For the first test case about the, we have resolved the value (so it will return success condition).

jest.spyOn(axios, 'default').mockResolvedValue({
  name: 'abc'
})

Then we check if the name is properly displayed or not using the following code

const wrapper = render(<App />);
await waitFor(() => expect(wrapper.queryAllByText('abc')).toHaveLength(1));

For the error condition, we are going to spy on axios and reject the value. This will mock the error in response.

jest.spyOn(axios, 'default').mockRejectedValue(()=>({}));

Then we are going to test if the error is displayed in the output using the following code

const wrapper = render(<App />);
await waitFor(() => expect(wrapper.container.innerHTML).toEqual('error'));

Published: Mar 9, 2022 by C.S. Rhymes

Recently I wanted to write a test for a React component that uses axios to retrieve information from an API. To do this I had to mock jest, but I ran into some issues with the types as I was using typescript. This article explains how I managed to get it to work.

Mocking axios

I started out by Googling and found this great article, 3 Ways To Mock Axios In Jest by Volodymyr Hudyma. In the article it provides three ways of mocking axios, two of which use additional packages, but I wanted to try the first option which was to mock axios using Jest and not have any additional dependencies.

The example app

I have created an example app using create-react-app that uses axios to retrieve a list of users and display them on the page.

View the full code repository on GitHub

npx create-react-app my-app --template typescript

The app already had @testing-library/react all set up and ready to go, I just had to add axios.

As we are using typescript, I have defined my User type as the id and the name as follows.

// App.tsx

type User = {
  id: number;
  name: string;
}

I used useState to store and update the users and then a getData method goes and gets the users and updates the state.

// App.tsx

  const [users, setUsers] = useState<User[] | undefined>(undefined);
  const getData = () => {
    axios.get('https://jsonplaceholder.typicode.com/users')
      .then((response) => {
        let responseUsers: User[] = response.data.map((responseUser: any) => {
          return {
            id: responseUser.id,
            name: responseUser.name
          }
        })
        setUsers(responseUsers);
      })
      .catch((error) => {
        console.log(error);
      })
  }

The component has a ‘Get users’ button that calls the getData method and then renders the list of returned users.

// App.tsx

  return (
    <div className="App">
      <header className="App-header">
        <button onClick={() => getData()}>Get users</button>
        <ul>
          {users?.map((user: User) => {
            return (<li key={user.id}>{user.name}</li>)
          })}
        </ul>
      </header>
    </div>
  );

Writing the test

I started out by writing a test that called the real API to ensure that it successfully called the API and returned some data. Here we use waitFor to wait for the response from the API before running the assertions. To use waitFor we need to make the test an async function.

// App.test.tsx

import React from 'react';
import { render, fireEvent, waitFor } from '@testing-library/react';
import App from './App';

describe('App', () => {
  const renderComponent = () => (render(<App />));

  test('renders learn react link', async () => {

    const { getByText, getAllByRole } = renderComponent();

    fireEvent.click(getByText('Get users'));

    await waitFor(() => {
      const userList = getAllByRole('listitem');
      expect(userList).toHaveLength(10);
      expect(userList[0]).toHaveTextContent('Leanne Graham');
      expect(userList[1]).toHaveTextContent('Ervin Howell');
    });
  });
})

This test uses fireEvent.click() to simulate clicking on the ‘Get users’ button, which triggers the getData() method. We then get the list items and assert that there are 10 items and then check the names of the users are displayed correctly.

This works but what happens if the API endpoint goes down, or the sample data is updated, then the tests will fail. Also, I don’t want to be calling a real API when tests are running in GitHub actions, an environment out of my control.

The test with Mock

I started by following the example in the article and added jest.mock('axios'); after the imports. Then as per the example, I added the axios.get.mockResolvedValue({}); but straight away I got a type error.

After a bit of Googling again I came across this stack overflow post which provided the solution.

import axios from 'axios';
jest.mock('axios');
const mockedAxios = axios as jest.Mocked<typeof axios>;

This removed the type error for the mockedAxios.get.mockResolvedValue({}) line and I was good to go. I then provided an example data return from the mocked axios with two users and updated the test so the length would be 2 and the names would be the names from my mocked data.

I have called this test AppMock.test.tsx so you can see both examples in the code repository.

// AppMock.test.tsx

import React from 'react';
import { render, fireEvent, waitFor } from '@testing-library/react';
import App from './App';
import axios from 'axios';

// Mock jest and set the type
jest.mock('axios');
const mockedAxios = axios as jest.Mocked<typeof axios>;

describe('App', () => {
  const renderComponent = () => (render(<App />));

  test('renders learn react link', async () => {

    const { getByText, getAllByRole } = renderComponent();

    // Provide the data object to be returned
    mockedAxios.get.mockResolvedValue({
      data: [
        {
          id: 1,
          name: 'Joe Doe'
        },
        {
          id: 2,
          name: 'Jane Doe'
        }
      ],
    });

    fireEvent.click(getByText('Get users'));

    await waitFor(() => {
      const userList = getAllByRole('listitem');
      expect(userList).toHaveLength(2);
      expect(userList[0]).toHaveTextContent('Joe Doe');
      expect(userList[1]).toHaveTextContent('Jane Doe');
    });
  });
})

TypeError: Cannot read properties of undefined (reading ‘then’)

Once I had got this example React app working, I tried to apply the same changes to another React project. This had a different set up and had a different Jest configuration. For some reason the above didn’t work with the other app. I got an error message, TypeError: Cannot read properties of undefined (reading 'then').

I don’t know the reasoning for this and unfortunately I can’t find the link to the forum that had the resolution for this, but I had to change jest.Mocked<typeof axios> to jest.MockedFunction<typeof axios>.

I also had to change mockedAxios.get.mockResolvedValue() to mockedAxios.mockResolvedValue(), removing the get.

Typescript then warned me that I also needed to provide status, statusText, headers and config, as well as the data object. Once I had done this the test now passed.

    mockedAxios.mockResolvedValueOnce({
      data: [
        {
          id: 1,
          name: 'Joe Doe'
        },
        {
          id: 2,
          name: 'Jane Doe'
        }
      ],
      status: 200,
      statusText: 'Ok',
      headers: {},
      config: {},
    });

I am still a beginner when it comes to Jest so if you know why this is then please leave a comment as it would be good to know the reason why.

Photo by Tricia Gray on StockSnap

I recently found myself working in a Javascript codebase where I needed to implement new Jest tests. I knew very little at the time about writing tests, so I looked to Jest docs and existing patterns in the codebase to figure out best practices and how to do it. It was fairly straightforward, and I even found myself enjoying testing. But I could not for the life of me reliably mock an API call.

The docs seemed clear, and the existing code appeared to have good patterns, but there were just so many ways to mock things. The existing tests used all sorts of mocking methods such as jest.genMockFromModule(), jest.spyOn(), and jest.mock(). Sometimes the mocks were inline, sometimes they were in variables, and sometimes they were imported and exported in magical ways from mysterious __mocks__ folders. I used these techniques interchangeably every time I got a burst of confidence in understanding, only to find myself stumbling over the different methods and their effects. I had no idea what I was doing.

The issue

The issue was that I was trying to learn how to run before I even knew how to walk. Jest has many powerful ways to mock functions and optimize those mocks, but they’re all useless if you don’t know how to make a simple mock in the first place. And while the Jest documentation provides a lot of great insight and techniques, I couldn’t figure out where to start.

In this article, I hope to give you absolute basics to mock an API call so you can benefit from my 2020 hindsight (heh). If you’re going crazy like I was because you can’t figure out how to just make a simple damn mock, Start here…

(NOTE: The code below was written in Node.js, but the mocking concepts also apply to frontend Javascript and ES6 modules)

The unmocked code

We’re going to be testing this getFirstAlbumTitle() function, which fetches an array of albums from an API and returns the title of the first album:

// index.js
const axios = require('axios');

async function getFirstAlbumTitle() {
  const response = await axios.get('https://jsonplaceholder.typicode.com/albums');
  return response.data[0].title;
}

module.exports = getFirstAlbumTitle;

…and here’s our initial mock-less test for this function, which verifies the function actually returns the title of the first album in the list:

// index.test.js
const getFirstAlbumTitle = require('./index');

it('returns the title of the first album', async () => {
  const title = await getFirstAlbumTitle();  // Run the function
  expect(title).toEqual('quidem molestiae enim');  // Make an assertion on the result
});

The test above does its job, but the test actually makes a network request to an API when it runs. This opens the test up to all sorts of false negatives if the API isn’t working exactly as expected (e.g. the list order changes, API is down, dev machine loses network connection, etc.). Not to mention, making these requests in a large number of tests can bring your test runs to a slow crawl.

But how can we change this? The API request is being made with axios as a part of getFirstAlbumTitle(). How in the world are we supposed to reach inside the function and change the behavior?

Mock it in 3 steps

Alright, here it is. This is the big secret that would have saved me mountains of time as I was wrestling with learning mocks. To mock an API call in a function, you just need to do these 3 steps:

1. Import the module you want to mock into your test file.
2. jest.mock() the module.
3. Use .mockResolvedValue(<mocked response>) to mock the response.

That’s it!

Here’s what our test looks like after doing this:

// index.test.js
const getFirstAlbumTitle = require('./index');
const axios = require('axios');

jest.mock('axios');

it('returns the title of the first album', async () => {
  axios.get.mockResolvedValue({
    data: [
      {
        userId: 1,
        id: 1,
        title: 'My First Album'
      },
      {
        userId: 1,
        id: 2,
        title: 'Album: The Sequel'
      }
    ]
  });

  const title = await getFirstAlbumTitle();
  expect(title).toEqual('My First Album');
});

What’s going on here?

Let’s break this down. The most important part to understand here is the import and jest.mock():

const axios = require('axios');

jest.mock('axios');

When you import a module into a test file, then call it in jest.mock(<module-name>), you have complete control over all functions from that module, even if they’re called inside another imported function. Immediately after calling jest.mock('axios'), Jest replaces every function in the axios module with empty «mock» functions that essentially do nothing and return undefined:

const axios = require('axios');
jest.mock('axios')

// Does nothing, then returns undefined:
axios.get('https://www.google.com')

// Does nothing, then returns undefined:
axios.post('https://jsonplaceholder.typicode.com/albums', {
    id: 3,
    title: 'Album with a Vengeance'
})

So now that you’ve eliminated the default behavior, you can replace it with your own…

  axios.get.mockResolvedValue({
    data: [
      {
        userId: 1,
        id: 1,
        title: 'My First Album'
      },
      {
        userId: 1,
        id: 2,
        title: 'Album: The Sequel'
      }
    ]
  });

The mocked replacement functions that Jest inserted into axios happen to come with a whole bunch of cool superpower methods to control their behavior! The most important one here, for the purposes of a simple beginner mock, is .mockResolvedValue(). When you call this on a mocked method, anything you pass in will be the default return value when the mocked function is called for the remainder of the test. Simply put: you can make axios.get() return whatever you want! And it doesn’t matter whether it’s called directly in your test file or as a part of a function imported into your test – Jest will mock the function no matter where it’s called!

Use this newfound power to give your functions exactly what they should expect from the API calls. Stop worrying about what the network requests return, and just focus on what YOUR code does once it gets the response!

If you want to play around with the examples, feel free to use this demo repository:

Wrapping up

There you have it! This is the very basics of what you need to mock functions from another module: import the module, jest.mock() the module, then insert your own return values with .mockResolvedValue()!

I recommend starting here, using only these techniques as you start building out your first mocks for your network calls. Once you have a foundational understanding of what’s going on here, you can slowly start adding the other robust mocking features included in Jest.

See also: Mocking Modules (Jest documentation).

EDIT: Also, be sure to clear your mocks between tests by running jest.resetAllMocks() after each test. This will help ensure your mocks won’t interfere with future tests. (Thanks for pointing this out, @mjeffe!)

Where to go from here

Alright, you’ve learned the basics of mocking and successfully implemented the strategies above in several tests. You can import and mock resolved values for all your API calls like an old pro. What’s next?

While the methods described above will cover most simple use cases, Jest has a lot of mocking functionality and methods to do some really powerful things. You can incrementally add some of the concepts below to super-charge your mocks:

1. Check out the other mock function methods listed in the Jest docs: Mock Functions. You can use methods such as mockReturnedValue() to mock synchronous returns and mockResolvedValueOnce() to only return a value the first time it’s called.
2. Want to see how many times a mocked function is called, what it was called with, and what it returned? Check out the mock.calls and mock.results properties (also in the Mock Functions documentation)
3. Do you have your own custom functions that make network requests? You can mock your own modules too after they’re imported into the test file: jest.mock('./path/to/js/module/file')! Careful here though that you’re only mocking what’s necessary. Your tests should make sure your functions do what’s expected with a given mock input, and it can be easy to end up writing tests that instead just confirm you passed in mocked data.
4. Want a function to act as it was originally written, but still want to see how many times it was called? Check out jest.spyOn().
5. Find yourself mocking the same function over and over in multiple tests? Give it default mock responses in __mocks__ folders using Manual Mocks!

I hope this saves others some of the wasted time and frustration I went through! If anything doesn’t make sense here, please leave a comment and I’d be happy to try to answer any questions. Also, let me know if there’s anything else that helped you have an «Aha!» moment while learning to mock!

Did you find this this article useful? Feel free to subscribe to my articles below or follow me on Twitter for more developer tips and article announcements!

• CSRF token
• Usage
• Mock Axios response in tests
  • Example
  • Mock poll requests in tests with Axios

We use Axios to communicate with the server in Vue applications and most new code.

In order to guarantee all defaults are set you should not use Axios directly, you should import Axios from axios_utils.

CSRF token

All our requests require a CSRF token.
To guarantee this token is set, we are importing Axios, setting the token, and exporting axios .

This exported module should be used instead of directly using Axios to ensure the token is set.

Usage

  import axios from './lib/utils/axios_utils';

  axios.get(url)
    .then((response) => {
      // `data` is the response that was provided by the server
      const data = response.data;

      // `headers` the headers that the server responded with
      // All header names are lower cased
      const paginationData = response.headers;
    })
    .catch(() => {
      //handle the error
    });

Mock Axios response in tests

To help us mock the responses we are using axios-mock-adapter.

Advantages over spyOn():

• no need to create response objects
• does not allow call through (which we want to avoid)
• clear API to test error cases
• provides replyOnce() to allow for different responses

We have also decided against using Axios interceptors because they are not suitable for mocking.

Example

  import axios from '~/lib/utils/axios_utils';
  import MockAdapter from 'axios-mock-adapter';

  let mock;
  beforeEach(() => {
    // This sets the mock adapter on the default instance
    mock = new MockAdapter(axios);
    // Mock any GET request to /users
    // arguments for reply are (status, data, headers)
    mock.onGet('/users').reply(200, {
      users: [
        { id: 1, name: 'John Smith' }
      ]
    });
  });

  afterEach(() => {
    mock.restore();
  });

Mock poll requests in tests with Axios

Because a polling function requires a header object, we need to always include an object as the third argument:

  mock.onGet('/users').reply(200, { foo: 'bar' }, {});