Creating Axios mock requests in Jest

How to create your own reusable axios mock request function for Jest.

ByXOR

image

Let's say I have a method named loadData which is responsible to load data from an REST get endpoint.

loadData = () => {
    Axios.get(“https://jsonplaceholder.typicode.com/users")
}

Now we want to write test on it.

Let's write some test on this method.

Test 1: Method implemented

expect(instance.loadData).toBeDefined()//Instance is your class or component shallow instance

Test 2: Now let's create a mock axios response to see this method return something.

import axios from "axios";
jest.mock("axios") //Add this on top of your test file.

Now lets make the loadData as async

loadData = async ()=>{
    Axios.get(“https://jsonplaceholder.typicode.com/users")
}

Let's consider our mockAxios return some data like

 {data:”some data”}

So our method loadData will return same data as response.

Our test would be like:

axios.get.mockResolvedValue({data:"some data"});
const result = await instance.loadData()
expect(result).toEqual({data:”some data”})

Test 3: This test covers the catch case of axios with mockRejectedValue.

axios.get.mockRejectedValue({error:"some error"});
  await instance.loadData().catch(err => {
  expect(err).toEqual({error:”some error”});
})

Now it's done!

Enjoyed this article?

Share it with your network to help others discover it

Continue Learning

Discover more articles on similar topics