How to fix Warning: An update to ForwardRef(Component) inside a test was not wrapped in act(...) in React

// ❌ Bad - synchronous query
const button = screen.getByRole('button');
fireEvent.click(button);
expect(screen.getByText('Success')).toBeInTheDocument();

// ✅ Good - async query with waitFor
const button = screen.getByRole('button');
fireEvent.click(button);
await waitFor(() => {
  expect(screen.getByText('Success')).toBeInTheDocument();
});

// ✅ Better - use findBy which includes waiting
const button = screen.getByRole('button');
fireEvent.click(button);
expect(await screen.findByText('Success')).toBeInTheDocument();

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

test('handles button click', async () => {
  const user = userEvent.setup();
  render(<MyComponent />);

  // ❌ fireEvent doesn't wait for async updates
  // fireEvent.click(screen.getByRole('button'));

  // ✅ userEvent properly awaits all updates
  await user.click(screen.getByRole('button'));

  expect(screen.getByText('Updated')).toBeInTheDocument();
});

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

test('updates after async operation', async () => {
  render(<AsyncComponent />);

  // Trigger the async operation
  const button = screen.getByRole('button');
  await userEvent.click(button);

  // Wait for the update to complete
  await waitFor(() => {
    expect(screen.getByText('Loading complete')).toBeInTheDocument();
  });

  // Or wait for element to appear
  await waitFor(() => {
    expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
  });
});

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

test('handles delayed state update', async () => {
  jest.useFakeTimers();

  render(<ComponentWithTimeout />);

  // Fast-forward time and flush all pending timers
  await act(async () => {
    jest.runAllTimers();
  });

  expect(screen.getByText('Timeout complete')).toBeInTheDocument();

  jest.useRealTimers();
});

// ❌ Bad - no cleanup, may update after unmount
useEffect(() => {
  fetchData().then(data => setData(data));
}, []);

// ✅ Good - cleanup cancels pending updates
useEffect(() => {
  let cancelled = false;

  fetchData().then(data => {
    if (!cancelled) {
      setData(data);
    }
  });

  return () => {
    cancelled = true;
  };
}, []);

// ✅ Also good - with AbortController
useEffect(() => {
  const controller = new AbortController();

  fetchData(controller.signal)
    .then(data => setData(data))
    .catch(err => {
      if (err.name !== 'AbortError') throw err;
    });

  return () => controller.abort();
}, []);

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

// Mock the API
jest.mock('../api', () => ({
  fetchUser: jest.fn(),
}));

import { fetchUser } from '../api';

test('loads user data', async () => {
  // Mock resolves immediately
  fetchUser.mockResolvedValue({ name: 'John' });

  render(<UserProfile userId="123" />);

  // Wait for the data to load
  expect(await screen.findByText('John')).toBeInTheDocument();

  // Or use waitFor
  await waitFor(() => {
    expect(screen.getByText('John')).toBeInTheDocument();
  });
});

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

test('handles external state manager', async () => {
  const { container } = render(<Component />);

  // Manual state update outside React
  await act(async () => {
    externalStore.dispatch({ type: 'UPDATE' });
    // Wait for any promises to resolve
    await new Promise(resolve => setTimeout(resolve, 0));
  });

  expect(container.textContent).toContain('Updated');
});