Jest Async Snapshot Not Working Fix

In this tutorial, you'll learn about Jest Async Snapshot Not Working Fix. We cover key concepts, practical examples, and best practices.

Your async component snapshot shows an empty state or loading spinner instead of the final rendered output — the snapshot was taken before the async operation completed.

The Problem

// WRONG — snapshot before async render completes
test('renders user profile', () => {
  const { container } = render(<UserProfile userId={1} />);
  expect(container).toMatchSnapshot();
  // Snapshot shows "Loading..." instead of the user profile
});

Snapshot:
<div>
  Loading...
</div>

The component fetches user data asynchronously. The snapshot captures the loading state because the data hasn't arrived yet.

Step-by-Step Fix

1. Wait for data to load

// RIGHT — wait for the async operation
import { render, screen, waitFor } from '@testing-library/react';

test('renders user profile', async () => {
  render(<UserProfile userId={1} />);

  // Wait for the user name to appear
  const userName = await screen.findByText('Alice');
  expect(userName).toBeInTheDocument();

  // Now take the snapshot after data is loaded
  expect(container).toMatchSnapshot();
});

2. Wait for specific elements

// RIGHT — wait for loading to finish
test('renders profile data', async () => {
  const { container } = render(<UserProfile userId={1} />);

  // Wait for loading spinner to disappear
  await waitFor(() => {
    expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
  });

  expect(container).toMatchSnapshot();
});

3. Use findBy queries (async version of getBy)

// RIGHT — async queries auto-wait
test('renders profile with async data', async () => {
  const { container } = render(<UserProfile userId={1} />);

  // findBy* waits up to 1000ms by default
  await screen.findByRole('heading', { name: /profile/i });

  expect(container).toMatchSnapshot();
});

4. Mock async dependencies for deterministic snapshots

// RIGHT — deterministic async data
jest.mock('./api');

test('renders profile with mocked data', async () => {
  fetchUser.mockResolvedValue({ id: 1, name: 'Alice' });

  const { container } = render(<UserProfile userId={1} />);

  await screen.findByText('Alice');
  expect(container).toMatchSnapshot();
});

Expected output:

PASS  tests/asyncSnapshot.test.js
  ✓ renders user profile (35 ms)
  ✓ waits for loading to finish (28 ms)

Prevention Tips

• Always await async data before taking snapshots
• Use findBy* queries that wait for elements
• Mock API calls for deterministic async behavior
• Use waitFor for custom wait conditions
• Test both loading and loaded states with separate snapshots

Common Mistakes with snapshot async

1. Forgetting that lazy evaluation defers computation until the value is forced, causing space leaks with unevaluated thunks
2. Using return to exit a function early instead of wrapping a pure value in the monad
3. Mixing let bindings with <- bindings in do notation, producing type errors

These mistakes appear frequently in real-world JEST code. DodaTech's contributors have identified these patterns through analysis of open-source projects and production systems.

Practice Exercise

Write a pure function that safely divides two integers using Maybe, then test it with edge cases like division by zero and negative numbers.

This exercise reinforces the concepts covered in this guide. Try implementing it before checking online solutions.

FAQ