How do I mock fetch in my React tests?

How do I mock fetch in my React tests?

You can use libraries like Jest and MSW to mock fetch calls in your React tests. Would you like a code example?

Yes, please provide a code example.

Sure! Here's a simple example using Jest:

import { render, screen } from '@testing-library/react';
import MyComponent from './MyComponent';

global.fetch = jest.fn(() => Promise.resolve({ json: () => Promise.resolve({ data: 'mocked data' }) }));

test('renders fetched data', async () => {
  render(<MyComponent />);
  const dataElement = await screen.findByText(/mocked data/i);
  expect(dataElement).toBeInTheDocument();
});

What if I want to test error handling?

You can simulate an error by making fetch return a rejected promise. Here's how:

global.fetch.mockImplementationOnce(() => Promise.reject(new Error('Fetch failed')));

test('handles fetch error', async () => {
  render(<MyComponent />);
  const errorElement = await screen.findByText(/fetch failed/i);
  expect(errorElement).toBeInTheDocument();
});