React Mocking APIs in Tests – Simulate Network Calls for Reliable Testing (2025 Guide)

Introduction – Why Mock APIs in React Tests?

React applications often rely on APIs to fetch or submit data. When testing such components, calling real APIs is slow, flaky, and unreliable.

Mocking APIs allows you to:

• Speed up tests
• Avoid actual network requests
• Simulate API responses (success, error, delay)
• Test components in isolation

In this guide, you’ll learn:

• How to mock APIs using jest.fn(), fetch, and axios
• Mock with MSW (Mock Service Worker)
• Handle different HTTP methods and edge cases
• Best practices for mocking external data in React Testing Library (RTL)

1. Mocking fetch with Jest

Component Example:

useEffect(() => {
  fetch('/api/data')
    .then(res => res.json())
    .then(setData);
}, []);

Test Example:

global.fetch = jest.fn(() =>
  Promise.resolve({
    json: () => Promise.resolve(['apple', 'banana']),
  })
);

test('renders fetched data', async () => {
  render(<Component />);
  expect(await screen.findByText('apple')).toBeInTheDocument();
});

Use findByText() or waitFor() for async assertions
Works for global fetch in most apps

2. Mocking Axios with Jest

Component:

import axios from 'axios';

useEffect(() => {
  axios.get('/api/items').then((res) => setItems(res.data));
}, []);

Test:

jest.mock('axios');

test('renders axios data', async () => {
  axios.get.mockResolvedValue({ data: ['apple', 'banana'] });

  render(<Component />);
  expect(await screen.findByText('banana')).toBeInTheDocument();
});

Mocks the entire axios module
Use mockRejectedValue() for simulating errors

3. Using MSW – Mock Service Worker (Recommended for Integration Tests)

Install:

npm install msw --save-dev

Create a Handler:

// handlers.js
import { rest } from 'msw';

export const handlers = [
  rest.get('/api/items', (req, res, ctx) => {
    return res(ctx.status(200), ctx.json(['apple', 'banana']));
  }),
];

Setup Server in Test:

// setupTests.js
import { setupServer } from 'msw/node';
import { handlers } from './handlers';

const server = setupServer(...handlers);

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

Works at the network level — no need to mock fetch or axios directly
Ideal for full test coverage of REST APIs

4. Simulating Error States

Jest Example:

fetch.mockImplementationOnce(() =>
  Promise.reject(new Error('API error'))
);

MSW Example:

rest.get('/api/items', (req, res, ctx) => {
  return res(ctx.status(500));
});

Test error boundaries, fallback UIs, and retry logic

Best Practices

Use jest.fn() for simple unit tests
Use msw for integration/end-to-end behavior
Always reset or restore mocks to avoid test pollution
Mock both success and failure cases
Assert against user-visible output, not internal state

Summary – Recap & Next Steps

Mocking APIs is critical for writing fast, reliable, and isolated React tests. Whether you’re unit testing with jest.fn() or doing full integration with MSW, mocking helps control every aspect of your component’s data interaction.

Key Takeaways:

• Use jest.fn() or mockResolvedValue() to fake APIs
• Use MSW for network-level, behavior-first mocking
• Test both loading, success, and failure states
• Always restore/reset mocks between tests
• Focus on testing user-facing behavior

Real-World Relevance:
Used in apps like GitHub, Vercel, and Shopify to reliably test everything from form submissions to REST APIs—without depending on live servers.

FAQ Section

Should I use jest.fn() or MSW?
Use jest.fn() for unit tests. Use MSW for integration or behavior-driven tests.

How do I test API failures?
Use mockRejectedValue() (Jest) or return ctx.status(500) (MSW) to simulate errors.

Can I mock GraphQL APIs with MSW?
Yes! MSW supports GraphQL with graphql.query() and graphql.mutation() handlers.

Should I test loading states too?
Absolutely. Mock slow responses or use manual loading triggers and assert loading spinners or skeletons.

Do I need to reset mocks?
Yes. Always use afterEach(() => jest.resetAllMocks()) or reset handlers in MSW to avoid test cross-contamination.