How to fix This error can occur when testing async state updates without wrapping in act() in React

// Example 1: Async function in useEffect
useEffect(() => {
  const fetchData = async () => {
    const data = await api.getData();
    setData(data); // State update happens async
  };
  fetchData();
}, []);

// Example 2: Event handler with async operation
const handleClick = async () => {
  const result = await submitForm();
  setResult(result); // State update after async call
};

// Example 3: Timer-based updates
useEffect(() => {
  const timer = setTimeout(() => {
    setLoaded(true); // State update after timeout
  }, 1000);
  return () => clearTimeout(timer);
}, []);

import { render, screen, act } from '@testing-library/react';

test('async state update', async () => {
  render(<MyComponent />);

  // Wrap the async operation in act()
  await act(async () => {
    // Trigger the async state update
    await userEvent.click(screen.getByText('Load Data'));
  });

  // Now assertions will wait for state updates
  expect(screen.getByText('Data loaded')).toBeInTheDocument();
});

import { act } from '@testing-library/react';

test('timer update', () => {
  jest.useFakeTimers();
  render(<ComponentWithTimer />);

  act(() => {
    jest.advanceTimersByTime(1000); // Advance timer
  });

  expect(screen.getByText('Timer done')).toBeInTheDocument();
  jest.useRealTimers();
});

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

test('async update with waitFor', async () => {
  render(<AsyncComponent />);

  // waitFor automatically wraps assertions in act()
  await waitFor(() => {
    expect(screen.getByText('Data loaded')).toBeInTheDocument();
  });
});

test('async update with findBy', async () => {
  render(<AsyncComponent />);

  // findBy queries wait for elements to appear
  const element = await screen.findByText('Data loaded');
  expect(element).toBeInTheDocument();
});

import userEvent from '@testing-library/user-event';

test('user interaction with async update', async () => {
  const user = userEvent.setup();
  render(<FormComponent />);

  // userEvent methods return promises
  await user.click(screen.getByText('Submit'));

  // State updates are handled automatically
  expect(screen.getByText('Submitted')).toBeInTheDocument();
});

// ❌ Problematic - state update in .then() without act()
fetch('/api/data')
  .then(response => response.json())
  .then(data => {
    setData(data); // Warning: state update outside act()
  });

// ✅ Fixed - wrap the entire chain
await act(async () => {
  const response = await fetch('/api/data');
  const data = await response.json();
  setData(data);
});

// ✅ Alternative: extract logic and test separately
const loadData = async () => {
  const response = await fetch('/api/data');
  const data = await response.json();
  setData(data);
};

// In test:
await act(async () => {
  await loadData();
});

// jest.setup.js or similar
import { act } from '@testing-library/react';

// Suppress act() warnings during development
const originalError = console.error;
beforeAll(() => {
  console.error = (...args) => {
    if (typeof args[0] === 'string' &&
        args[0].includes('Warning: An update to') &&
        args[0].includes('inside a test was not wrapped in act')) {
      return;
    }
    originalError.call(console, ...args);
  };
});

afterAll(() => {
  console.error = originalError;
});

# Run tests with verbose output
npm test -- --verbose

# Or with Jest directly
npx jest --verbose