⏳ Async Testing with Jest

Learn to test async code in Jest.

Using findBy for Async Elements

test('displays user after loading', async () => {
  render(<UserProfile userId={1} />);
  
  const name = await screen.findByText('Alice');
  expect(name).toBeInTheDocument();
});

Mocking Fetch

test('fetches and displays data', async () => {
  global.fetch = jest.fn(() =>
    Promise.resolve({
      json: () => Promise.resolve({ name: 'Alice' })
    })
  );

  render(<UserProfile userId={1} />);
  
  const name = await screen.findByText('Alice');
  expect(name).toBeInTheDocument();
});

Testing Async/Await

test('handles async operations', async () => {
  render(<DataLoader />);
  
  expect(screen.getByText('Loading...')).toBeInTheDocument();
  
  const data = await screen.findByText('Data loaded');
  expect(data).toBeInTheDocument();
});

Error Handling

test('displays error on failure', async () => {
  global.fetch = jest.fn(() =>
    Promise.reject(new Error('Network error'))
  );

  render(<UserProfile userId={1} />);
  
  const error = await screen.findByText('Network error');
  expect(error).toBeInTheDocument();
});

✅ Key Takeaways

• Use **findBy** for async elements (waits automatically)

• Mark tests as **async** when using await

• Mock **fetch** and promises

• Test **loading and error states**

• Always **await** async operations