How to Mock API Calls in React Testing Library Tests

How to Mock API Calls in React Testing Library Tests

Mocking API calls is essential for reliable React tests. Network calls make tests slow and flaky. Here is how to mock cleanly.

Why Mock API Calls

Real API calls make tests slow, flaky, and dependent on a network. Mocking lets tests run fast, deterministically, and without external dependencies.

Approach 1: Mock the Fetch Function

Use jest.fn to mock the global fetch function and return a resolved value. This is simple and works for basic cases. Reset the mock between tests.

Approach 2: Mock the Module

If you use a module like an API client, jest.mock the module and return controlled responses. This mocks at the boundary, which is cleaner than mocking fetch globally.

Approach 3: MSW

Mock Service Worker, or MSW, intercepts network requests at the service worker level. It is the most realistic way to mock, since your app still makes real requests that are intercepted. Great for tests and for development.

Handling Loading States

After mocking, your test should still wait for the async result. Use findBy queries or waitFor to wait for the data to appear, since rendering is async.

Resetting Mocks

Reset mocks between tests so one test does not affect another. Use beforeEach to reset mock call counts and return values.

Testing Error Cases

Mock a rejected promise to test error handling. Make sure your UI shows the error message and a retry option, not a blank screen.

The Takeaway

Mock API calls to make tests fast and deterministic. Use jest.fn for simple cases, jest.mock for module mocking at the boundary, and MSW for realistic interception. Wait for async results and reset mocks between tests.