React · Testing

Async Testing

Master testing asynchronous operations in React - learn to handle loading states, API calls, timers, and async side effects with confidence using waitFor and findBy queries.

Find videos you like?

Save to resource drawer for future reference!

Why Async Testing Matters

Most apps depend on async operations

Modern React apps are full of asynchronous operations: fetching data from APIs, waiting for user actions, handling loading states, and more. Testing these scenarios requires special techniques to wait for async operations to complete.

React Testing Library provides powerful tools like waitFor() and findBy* queries to handle these async scenarios!

Loading States

Test that loading indicators appear and disappear correctly.

API Calls

Verify data fetching, success, and error handling work correctly.

Timers & Delays

Test components with setTimeout, debounce, and throttle.

Try an Async Component

This UserProfile component fetches data asynchronously. Watch it transition from loading → success state. Perfect for testing async behavior!

Loading State

Async Data Fetch

Error Handling

Async Component Preview

See loading, success, and error states

UserProfile Async Component

Frontend

<div id="root"></div>

Live Preview

Loading preview...

Async Testing Tools

Three ways to wait for async updates

React Testing Library gives you multiple tools to handle async operations. Choose the right one for your situation:

waitFor()

Wait for Condition

Wait until a condition becomes true. Most flexible option!

await waitFor(() => {

expect(element)

.toBeInTheDocument();

});

findBy*

Find Async Element

Query + wait combined. Returns promise that resolves when element appears.

const user = await

screen.findByText(

'Sarah Johnson'

);

waitForElementToBeRemoved()

Wait for Removal

Wait for an element to disappear from the DOM.

await

waitForElementToBeRemoved(

loadingSpinner

);

Test 1: Loading States

Test that loading indicators appear and disappear

Testing Loading State

javascript

Verify loading appears then disappears when data loads

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

// Mock fetch API
global.fetch = jest.fn();

describe('UserProfile - Loading State', () => {
  beforeEach(() => {
    fetch.mockClear();
  });

  test('shows loading state initially', () => {
    fetch.mockResolvedValue({
      json: async () => ({ name: 'Sarah', email: 'sarah@test.com' })
    });
    
    render(<UserProfile userId="123" />);
    
    // Loading should appear immediately
    expect(screen.getByText(/loading/i)).toBeInTheDocument();
  });

  test('hides loading after data loads', async () => {
    fetch.mockResolvedValue({
      json: async () => ({ name: 'Sarah', email: 'sarah@test.com' })
    });
    
    render(<UserProfile userId="123" />);
    
    // Wait for loading to disappear
    await waitFor(() => {
      expect(screen.queryByText(/loading/i)).not.toBeInTheDocument();
    });
  });

  test('shows user data after loading completes', async () => {
    const userData = { name: 'Sarah Johnson', email: 'sarah@test.com' };
    fetch.mockResolvedValue({
      json: async () => userData
    });
    
    render(<UserProfile userId="123" />);
    
    // Wait for and verify user data appears
    expect(await screen.findByText('Sarah Johnson')).toBeInTheDocument();
    expect(await screen.findByText(/sarah@test.com/i)).toBeInTheDocument();
  });
});

Console Output

❯✓ UserProfile - Loading State › shows loading state initially (12ms)

❯✓ UserProfile - Loading State › hides loading after data loads (156ms)

❯✓ UserProfile - Loading State › shows user data after loading completes (178ms)

❯Test Suites: 1 passed, 1 total

❯Tests: 3 passed, 3 total

// ✅ Loading state tests passed!

Test 2: API Calls

Test data fetching and API integration

Testing API Integration

javascript

Mock API calls and verify correct data handling

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

global.fetch = jest.fn();

describe('UserList - API Calls', () => {
  beforeEach(() => {
    fetch.mockClear();
  });

  test('fetches and displays users', async () => {
    const users = [
      { id: 1, name: 'Alice' },
      { id: 2, name: 'Bob' }
    ];
    
    fetch.mockResolvedValue({
      json: async () => users
    });
    
    render(<UserList />);
    
    // Wait for users to appear
    expect(await screen.findByText('Alice')).toBeInTheDocument();
    expect(await screen.findByText('Bob')).toBeInTheDocument();
    
    // Verify fetch was called correctly
    expect(fetch).toHaveBeenCalledTimes(1);
    expect(fetch).toHaveBeenCalledWith('/api/users');
  });

  test('calls API with correct parameters', async () => {
    fetch.mockResolvedValue({
      json: async () => []
    });
    
    render(<UserList filter="active" />);
    
    await waitFor(() => {
      expect(fetch).toHaveBeenCalledWith('/api/users?status=active');
    });
  });

  test('refetches when props change', async () => {
    fetch.mockResolvedValue({
      json: async () => []
    });
    
    const { rerender } = render(<UserList filter="active" />);
    
    await waitFor(() => expect(fetch).toHaveBeenCalledTimes(1));
    
    // Change props and verify new fetch
    rerender(<UserList filter="inactive" />);
    
    await waitFor(() => {
      expect(fetch).toHaveBeenCalledTimes(2);
      expect(fetch).toHaveBeenLastCalledWith('/api/users?status=inactive');
    });
  });
});

Console Output

❯✓ UserList - API Calls › fetches and displays users (185ms)

❯✓ UserList - API Calls › calls API with correct parameters (142ms)

❯✓ UserList - API Calls › refetches when props change (203ms)

❯Test Suites: 1 passed, 1 total

❯Tests: 3 passed, 3 total

// ✅ API integration works!

Test 3: Error Handling

Test error states and error messages

Testing Error States

javascript

Verify error handling and error messages display correctly

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

global.fetch = jest.fn();

describe('DataFetcher - Error Handling', () => {
  beforeEach(() => {
    fetch.mockClear();
    // Suppress console errors in tests
    jest.spyOn(console, 'error').mockImplementation(() => {});
  });

  afterEach(() => {
    console.error.mockRestore();
  });

  test('displays error message when fetch fails', async () => {
    fetch.mockRejectedValue(new Error('Network error'));
    
    render(<DataFetcher />);
    
    // Wait for error message to appear
    expect(await screen.findByText(/network error/i)).toBeInTheDocument();
    
    // Loading should be gone
    expect(screen.queryByText(/loading/i)).not.toBeInTheDocument();
  });

  test('displays error for 404 response', async () => {
    fetch.mockResolvedValue({
      ok: false,
      status: 404,
      json: async () => ({ message: 'Not found' })
    });
    
    render(<DataFetcher url="/api/users/999" />);
    
    expect(await screen.findByText(/not found/i)).toBeInTheDocument();
  });

  test('allows retry after error', async () => {
    fetch.mockRejectedValueOnce(new Error('Failed'))
          .mockResolvedValueOnce({
            json: async () => ({ data: 'Success' })
          });
    
    render(<DataFetcher />);
    
    // Wait for error
    const retryButton = await screen.findByRole('button', { name: /retry/i });
    
    // Click retry
    fireEvent.click(retryButton);
    
    // Wait for success
    expect(await screen.findByText('Success')).toBeInTheDocument();
    expect(fetch).toHaveBeenCalledTimes(2);
  });
});

Console Output

❯✓ DataFetcher - Error Handling › displays error message when fetch fails (167ms)

❯✓ DataFetcher - Error Handling › displays error for 404 response (145ms)

❯✓ DataFetcher - Error Handling › allows retry after error (198ms)

❯Test Suites: 1 passed, 1 total

❯Tests: 3 passed, 3 total

// ✅ Error handling tested!

Test 4: Timers & Debounce

Test components with setTimeout and debounce

Testing Timers

javascript

Handle setTimeout, setInterval, and debounce in tests

import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import SearchBox from './SearchBox';

// Mock timer functions
jest.useFakeTimers();

describe('SearchBox - Timers', () => {
  afterEach(() => {
    jest.clearAllTimers();
  });

  test('debounces search input', async () => {
    const handleSearch = jest.fn();
    const user = userEvent.setup({ delay: null });
    
    render(<SearchBox onSearch={handleSearch} debounceMs={500} />);
    
    const input = screen.getByRole('textbox');
    
    // Type quickly (should be debounced)
    await user.type(input, 'React');
    
    // Search should not be called yet
    expect(handleSearch).not.toHaveBeenCalled();
    
    // Fast-forward time
    jest.advanceTimersByTime(500);
    
    // Now search should be called
    await waitFor(() => {
      expect(handleSearch).toHaveBeenCalledWith('React');
      expect(handleSearch).toHaveBeenCalledTimes(1);
    });
  });

  test('shows notification after delay', async () => {
    render(<Notification message="Saved!" duration={3000} />);
    
    // Notification should be visible
    expect(screen.getByText('Saved!')).toBeInTheDocument();
    
    // Fast-forward time
    jest.advanceTimersByTime(3000);
    
    // Wait for notification to disappear
    await waitFor(() => {
      expect(screen.queryByText('Saved!')).not.toBeInTheDocument();
    });
  });

  test('auto-saves with interval', async () => {
    const handleSave = jest.fn();
    
    render(<AutoSaveEditor onSave={handleSave} interval={5000} />);
    
    // No saves yet
    expect(handleSave).not.toHaveBeenCalled();
    
    // Fast-forward 5 seconds
    jest.advanceTimersByTime(5000);
    expect(handleSave).toHaveBeenCalledTimes(1);
    
    // Fast-forward another 5 seconds
    jest.advanceTimersByTime(5000);
    expect(handleSave).toHaveBeenCalledTimes(2);
  });
});

Console Output

❯✓ SearchBox - Timers › debounces search input (89ms)

❯✓ SearchBox - Timers › shows notification after delay (52ms)

❯✓ SearchBox - Timers › auto-saves with interval (67ms)

❯Test Suites: 1 passed, 1 total

❯Tests: 3 passed, 3 total

// ✅ Timer tests passed!

Async Testing Decision Tree

Choose the right approach

Need to wait for an element to appear?

✅ Use findBy* queries

Need to wait for an element to disappear?

✅ Use waitForElementToBeRemoved()

Need to wait for any custom condition?

✅ Use waitFor(() => expect(...))

Testing setTimeout or setInterval?

✅ Use jest.useFakeTimers() and jest.advanceTimersByTime()

Async Testing Best Practices

Prefer findBy Over getBy + waitFor

Use findBy* instead of wrapping getBy* in waitFor.

// ✅ Good

await screen.findByText('Loaded');

// ❌ Verbose

await waitFor(() => screen.getByText('Loaded'));

Don't Forget to Await

Always await async queries and waitFor. Forgetting causes tests to fail unexpectedly!

Mock External Dependencies

Always mock fetch, axios, or other external APIs. Don't make real network requests in tests!

Test All Async States

Test loading state, success state, and error state. Cover the full async lifecycle!

Key Takeaways

findBy* Queries

Wait for elements to appear. Returns a promise that resolves when found.

waitFor()

Wait for any custom condition. Most flexible async testing tool.

Test Loading States

Verify loading indicators appear and disappear correctly.

Mock APIs

Always mock fetch and external APIs. No real network calls!

Test Errors

Test error states and verify error messages display correctly.

Fake Timers

Use jest.useFakeTimers() for setTimeout and debounce testing.

You're an Async Testing Pro!

You now know how to test all async scenarios! Final topic:

Mocking & Stubbing - Master mocking functions, modules, and APIs

Previous Topic

Hook Testing

Test custom hooks with renderHook, act, and advanced hook testing patterns.

Next Topic

Mocking & Stubbing

Mock functions, modules, API calls, and isolate components during testing.

Ask a Question

Have a question about Async Testing? Ask our AI assistant.

🔐 Login to use AI Assistant

React · Testing

Async Testing

Master testing asynchronous operations in React - learn to handle loading states, API calls, timers, and async side effects with confidence using waitFor and findBy queries.

Find videos you like?

Save to resource drawer for future reference!

Why Async Testing Matters

Most apps depend on async operations

React Testing Library provides powerful tools like waitFor() and findBy* queries to handle these async scenarios!

Loading States

Test that loading indicators appear and disappear correctly.

API Calls

Verify data fetching, success, and error handling work correctly.

Timers & Delays

Test components with setTimeout, debounce, and throttle.

Try an Async Component

This UserProfile component fetches data asynchronously. Watch it transition from loading → success state. Perfect for testing async behavior!

Loading State

Async Data Fetch

Error Handling

Async Component Preview

See loading, success, and error states

UserProfile Async Component

Frontend

<div id="root"></div>

Live Preview

Loading preview...

Async Testing Tools

Three ways to wait for async updates

React Testing Library gives you multiple tools to handle async operations. Choose the right one for your situation:

waitFor()

Wait for Condition

Wait until a condition becomes true. Most flexible option!

await waitFor(() => {

expect(element)

.toBeInTheDocument();

});

findBy*

Find Async Element

Query + wait combined. Returns promise that resolves when element appears.

const user = await

screen.findByText(

'Sarah Johnson'

);

waitForElementToBeRemoved()

Wait for Removal

Wait for an element to disappear from the DOM.

await

waitForElementToBeRemoved(

loadingSpinner

);

Test 1: Loading States

Test that loading indicators appear and disappear

Testing Loading State

javascript

Verify loading appears then disappears when data loads

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

// Mock fetch API
global.fetch = jest.fn();

describe('UserProfile - Loading State', () => {
  beforeEach(() => {
    fetch.mockClear();
  });

  test('shows loading state initially', () => {
    fetch.mockResolvedValue({
      json: async () => ({ name: 'Sarah', email: 'sarah@test.com' })
    });
    
    render(<UserProfile userId="123" />);
    
    // Loading should appear immediately
    expect(screen.getByText(/loading/i)).toBeInTheDocument();
  });

  test('hides loading after data loads', async () => {
    fetch.mockResolvedValue({
      json: async () => ({ name: 'Sarah', email: 'sarah@test.com' })
    });
    
    render(<UserProfile userId="123" />);
    
    // Wait for loading to disappear
    await waitFor(() => {
      expect(screen.queryByText(/loading/i)).not.toBeInTheDocument();
    });
  });

  test('shows user data after loading completes', async () => {
    const userData = { name: 'Sarah Johnson', email: 'sarah@test.com' };
    fetch.mockResolvedValue({
      json: async () => userData
    });
    
    render(<UserProfile userId="123" />);
    
    // Wait for and verify user data appears
    expect(await screen.findByText('Sarah Johnson')).toBeInTheDocument();
    expect(await screen.findByText(/sarah@test.com/i)).toBeInTheDocument();
  });
});

Console Output

❯✓ UserProfile - Loading State › shows loading state initially (12ms)

❯✓ UserProfile - Loading State › hides loading after data loads (156ms)

❯✓ UserProfile - Loading State › shows user data after loading completes (178ms)

❯Test Suites: 1 passed, 1 total

❯Tests: 3 passed, 3 total

// ✅ Loading state tests passed!

Test 2: API Calls

Test data fetching and API integration

Testing API Integration

javascript

Mock API calls and verify correct data handling

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

global.fetch = jest.fn();

describe('UserList - API Calls', () => {
  beforeEach(() => {
    fetch.mockClear();
  });

  test('fetches and displays users', async () => {
    const users = [
      { id: 1, name: 'Alice' },
      { id: 2, name: 'Bob' }
    ];
    
    fetch.mockResolvedValue({
      json: async () => users
    });
    
    render(<UserList />);
    
    // Wait for users to appear
    expect(await screen.findByText('Alice')).toBeInTheDocument();
    expect(await screen.findByText('Bob')).toBeInTheDocument();
    
    // Verify fetch was called correctly
    expect(fetch).toHaveBeenCalledTimes(1);
    expect(fetch).toHaveBeenCalledWith('/api/users');
  });

  test('calls API with correct parameters', async () => {
    fetch.mockResolvedValue({
      json: async () => []
    });
    
    render(<UserList filter="active" />);
    
    await waitFor(() => {
      expect(fetch).toHaveBeenCalledWith('/api/users?status=active');
    });
  });

  test('refetches when props change', async () => {
    fetch.mockResolvedValue({
      json: async () => []
    });
    
    const { rerender } = render(<UserList filter="active" />);
    
    await waitFor(() => expect(fetch).toHaveBeenCalledTimes(1));
    
    // Change props and verify new fetch
    rerender(<UserList filter="inactive" />);
    
    await waitFor(() => {
      expect(fetch).toHaveBeenCalledTimes(2);
      expect(fetch).toHaveBeenLastCalledWith('/api/users?status=inactive');
    });
  });
});

Console Output

❯✓ UserList - API Calls › fetches and displays users (185ms)

❯✓ UserList - API Calls › calls API with correct parameters (142ms)

❯✓ UserList - API Calls › refetches when props change (203ms)

❯Test Suites: 1 passed, 1 total

❯Tests: 3 passed, 3 total

// ✅ API integration works!

Test 3: Error Handling

Test error states and error messages

Testing Error States

javascript

Verify error handling and error messages display correctly

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

global.fetch = jest.fn();

describe('DataFetcher - Error Handling', () => {
  beforeEach(() => {
    fetch.mockClear();
    // Suppress console errors in tests
    jest.spyOn(console, 'error').mockImplementation(() => {});
  });

  afterEach(() => {
    console.error.mockRestore();
  });

  test('displays error message when fetch fails', async () => {
    fetch.mockRejectedValue(new Error('Network error'));
    
    render(<DataFetcher />);
    
    // Wait for error message to appear
    expect(await screen.findByText(/network error/i)).toBeInTheDocument();
    
    // Loading should be gone
    expect(screen.queryByText(/loading/i)).not.toBeInTheDocument();
  });

  test('displays error for 404 response', async () => {
    fetch.mockResolvedValue({
      ok: false,
      status: 404,
      json: async () => ({ message: 'Not found' })
    });
    
    render(<DataFetcher url="/api/users/999" />);
    
    expect(await screen.findByText(/not found/i)).toBeInTheDocument();
  });

  test('allows retry after error', async () => {
    fetch.mockRejectedValueOnce(new Error('Failed'))
          .mockResolvedValueOnce({
            json: async () => ({ data: 'Success' })
          });
    
    render(<DataFetcher />);
    
    // Wait for error
    const retryButton = await screen.findByRole('button', { name: /retry/i });
    
    // Click retry
    fireEvent.click(retryButton);
    
    // Wait for success
    expect(await screen.findByText('Success')).toBeInTheDocument();
    expect(fetch).toHaveBeenCalledTimes(2);
  });
});

Console Output

❯✓ DataFetcher - Error Handling › displays error message when fetch fails (167ms)

❯✓ DataFetcher - Error Handling › displays error for 404 response (145ms)

❯✓ DataFetcher - Error Handling › allows retry after error (198ms)

❯Test Suites: 1 passed, 1 total

❯Tests: 3 passed, 3 total

// ✅ Error handling tested!

Test 4: Timers & Debounce

Test components with setTimeout and debounce

Testing Timers

javascript

Handle setTimeout, setInterval, and debounce in tests

import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import SearchBox from './SearchBox';

// Mock timer functions
jest.useFakeTimers();

describe('SearchBox - Timers', () => {
  afterEach(() => {
    jest.clearAllTimers();
  });

  test('debounces search input', async () => {
    const handleSearch = jest.fn();
    const user = userEvent.setup({ delay: null });
    
    render(<SearchBox onSearch={handleSearch} debounceMs={500} />);
    
    const input = screen.getByRole('textbox');
    
    // Type quickly (should be debounced)
    await user.type(input, 'React');
    
    // Search should not be called yet
    expect(handleSearch).not.toHaveBeenCalled();
    
    // Fast-forward time
    jest.advanceTimersByTime(500);
    
    // Now search should be called
    await waitFor(() => {
      expect(handleSearch).toHaveBeenCalledWith('React');
      expect(handleSearch).toHaveBeenCalledTimes(1);
    });
  });

  test('shows notification after delay', async () => {
    render(<Notification message="Saved!" duration={3000} />);
    
    // Notification should be visible
    expect(screen.getByText('Saved!')).toBeInTheDocument();
    
    // Fast-forward time
    jest.advanceTimersByTime(3000);
    
    // Wait for notification to disappear
    await waitFor(() => {
      expect(screen.queryByText('Saved!')).not.toBeInTheDocument();
    });
  });

  test('auto-saves with interval', async () => {
    const handleSave = jest.fn();
    
    render(<AutoSaveEditor onSave={handleSave} interval={5000} />);
    
    // No saves yet
    expect(handleSave).not.toHaveBeenCalled();
    
    // Fast-forward 5 seconds
    jest.advanceTimersByTime(5000);
    expect(handleSave).toHaveBeenCalledTimes(1);
    
    // Fast-forward another 5 seconds
    jest.advanceTimersByTime(5000);
    expect(handleSave).toHaveBeenCalledTimes(2);
  });
});

Console Output

❯✓ SearchBox - Timers › debounces search input (89ms)

❯✓ SearchBox - Timers › shows notification after delay (52ms)

❯✓ SearchBox - Timers › auto-saves with interval (67ms)

❯Test Suites: 1 passed, 1 total

❯Tests: 3 passed, 3 total

// ✅ Timer tests passed!

Async Testing Decision Tree

Choose the right approach

Need to wait for an element to appear?

✅ Use findBy* queries

Need to wait for an element to disappear?

✅ Use waitForElementToBeRemoved()

Need to wait for any custom condition?

✅ Use waitFor(() => expect(...))

Testing setTimeout or setInterval?

✅ Use jest.useFakeTimers() and jest.advanceTimersByTime()

Async Testing Best Practices

Prefer findBy Over getBy + waitFor

Use findBy* instead of wrapping getBy* in waitFor.

// ✅ Good

await screen.findByText('Loaded');

// ❌ Verbose

await waitFor(() => screen.getByText('Loaded'));

Don't Forget to Await

Always await async queries and waitFor. Forgetting causes tests to fail unexpectedly!

Mock External Dependencies

Always mock fetch, axios, or other external APIs. Don't make real network requests in tests!

Test All Async States

Test loading state, success state, and error state. Cover the full async lifecycle!

Key Takeaways

findBy* Queries

Wait for elements to appear. Returns a promise that resolves when found.

waitFor()

Wait for any custom condition. Most flexible async testing tool.

Test Loading States

Verify loading indicators appear and disappear correctly.

Mock APIs

Always mock fetch and external APIs. No real network calls!

Test Errors

Test error states and verify error messages display correctly.

Fake Timers

Use jest.useFakeTimers() for setTimeout and debounce testing.

You're an Async Testing Pro!

You now know how to test all async scenarios! Final topic:

Mocking & Stubbing - Master mocking functions, modules, and APIs

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Hook Testing

Mocking & Stubbing

Building Your Learning Module...

Async Testing

Loading States

API Calls

Timers & Delays

Try an Async Component

UserProfile Async Component

Wait for Condition

Find Async Element

Wait for Removal

Prefer findBy Over getBy + waitFor

Don't Forget to Await

Mock External Dependencies

Test All Async States

findBy* Queries

waitFor()

Test Loading States

Mock APIs

Test Errors

Fake Timers

You're an Async Testing Pro!

Hook Testing

Mocking & Stubbing

Async Testing

Loading States

API Calls

Timers & Delays

Try an Async Component

UserProfile Async Component

Wait for Condition

Find Async Element

Wait for Removal

Prefer findBy Over getBy + waitFor

Don't Forget to Await

Mock External Dependencies

Test All Async States

findBy* Queries

waitFor()

Test Loading States

Mock APIs

Test Errors

Fake Timers

You're an Async Testing Pro!