Mocking API Calls in React Tests with Jest (2024)

When testing React components that make API calls, it's important to ensure that our tests run smoothly without actually hitting the real API endpoints. This is where mocking comes in handy. In this step-by-step guide, we'll learn how to mock API calls and test asynchronous behavior in React components using Jest's mocking functionalities.

Prerequisites

• Basic knowledge of React and Jest testing framework.
• Node.js and npm installed on your machine.
• A React project set up with Jest for testing.

Step 1: Install Jest and React Testing Library

If you haven't already set up Jest and React Testing Library in your project, you can do so by running the following commands:

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

Step 2: Mocking API Calls

We'll start by creating a simple React component that fetches data from an API. For example, let's create a UserList component that fetches a list of users:

// UserList.jsimport React, { useState, useEffect } from 'react';const UserList = () => { const [users, setUsers] = useState([]); useEffect(() => { fetchUsers(); }, []); const fetchUsers = async () => { try { const response = await fetch('https://api.example.com/users'); const data = await response.json(); setUsers(data); } catch (error) { console.error('Error fetching users:', error); } }; return ( <div> <h1>User List</h1> <ul> {users.map(user => ( <li key={user.id}>{user.name}</li> ))} </ul> </div> );};export default UserList; 

Step 3: Writing Tests

Now, let's write tests for the UserList component. We'll mock the fetch function to return dummy data for testing.

Create a new file UserList.test.js in the same directory as your component:

Recommended by LinkedIn

A Guide to Test 3rd Party APIs with Mock

Sidharth Shukla 6 months ago

The Pros and Cons of different test tools - k6

Craig Risi 11 months ago

See Also

Mock Functions · Jest

Postman Hacks: Overcoming Challenges and Powering Up…

Amr Saafan 7 months ago

// UserList.test.jsimport React from 'react';import { render, screen, waitFor } from '@testing-library/react';import UserList from './UserList';test('renders user list', async () => { // Mock the fetch function global.fetch = jest.fn(() => Promise.resolve({ json: () => Promise.resolve([{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }]) }) ); render(<UserList />); // Wait for the component to fetch data await waitFor(() => { const userList = screen.getByText(/user list/i); expect(userList).toBeInTheDocument(); const user1 = screen.getByText(/alice/i); expect(user1).toBeInTheDocument(); const user2 = screen.getByText(/bob/i); expect(user2).toBeInTheDocument(); });}); 

Step 4: Explanation

• In the test file, we first mock the fetch function using Jest's jest.fn() to return a Promise that resolves to our dummy user data.
• Then, we render the UserList component.
• Using waitFor from @testing-library/react, we wait for the component to finish fetching data.
• Finally, we assert that the user list and individual user names are rendered correctly.

Step 5: Run Tests

Run the tests using the following command:

npm test 

You should see that the tests pass, and Jest executes the tests without making actual API calls.

Conclusion

In this tutorial, we've learned how to mock API calls in React tests using Jest. By mocking the fetch function, we can isolate our tests from external dependencies, ensuring reliable and predictable testing of asynchronous behavior in React components.

Mocking API calls allows us to control the data returned during testing, making it easier to cover various scenarios without relying on a live API. This approach helps in creating robust and maintainable React applications.

Now you're equipped with the knowledge to effectively test React components that interact with APIs.

Happy testing!