How To Mock HTTP Requests with Jest: A Step-By-Step Guide

When testing web applications, there’s always a part where you have to test your Controllers. Be it a request to your own server or an 3rd party API, one thing’s for certain: You’ll have to test a function that contains an HTTP request.

And after reading this blog post, you’ll know exactly how to do that using the Jest testing framework. 

Jest stands out as a testing framework for several reasons:

Setting Up Your Project for Testing with Jest

Let's start by setting up a project with Jest:

These steps lay the foundation for integrating Jest into your project.

Consider a function that makes an API call, such as fetching user data. Here's an example using axios:

// user.js
import axios from 'axios';

export const getUser = async (userId) => {
  const response = await axios.get(`https://api.example.com/users/${userId}`);
  return response.data;
};

// user.test.js
import axios from 'axios';
jest.mock('axios');
import { getUser } from './user';

test('should fetch user data', async () => {
  const mockUserData = { id: '1', name: 'John Doe' };
  axios.get.mockResolvedValue({ data: mockUserData });

  const result = await getUser('1');

  expect(axios.get).toHaveBeenCalledWith('https://api.example.com/users/1');
  expect(result).toEqual(mockUserData);
});

Congratulations! You now have a working test with Jest and mocking. Understanding how to mock HTTP requests in Jest is a crucial skill for any software engineer working with modern web applications. Stay tuned for more advanced techniques and deeper dives into Jest’s capabilities in our upcoming posts.

CONTRIBUTOR

GC Tsalamagkakis

AUTHOR

Akinwale Folorunsho Habibullah

When testing web applications, there’s always a part where you have to test your Controllers. Be it a request to your own server or an 3rd party API, one thing’s for certain: You’ll have to test a function that contains an HTTP request. And after reading this blog post, you’ll know exactly how to…

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Free Tools

How To Mock HTTP Requests with Jest: A Step-By-Step Guide

Responses (0)

Free AI Career Tools

AI Job Listings

ATS Resume Checker

Startup Perks

Masterclasses

Tutorials

Fullstack React with TypeScript