How do I use async/await in React Testing Library?

How do I use async/await in React Testing Library?

You can use async/await in React Testing Library to handle asynchronous code in your tests. This allows you to wait for elements to appear or for promises to resolve.

Can you show me a code example?

Sure! Here's a simple example:

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

test('loads and displays greeting', async () => {
  render(<MyComponent />);
  const greeting = await waitFor(() => screen.getByText('Hello, World!'));
  expect(greeting).toBeInTheDocument();
});

What if I want to test a button click that fetches data?

You can still use async/await! Just wrap your button click in an async function and await the result. Here's an example:

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

test('fetches and displays data on button click', async () => {
  render(<MyComponent />);
  fireEvent.click(screen.getByRole('button', { name: /fetch data/i }));
  const dataElement = await waitFor(() => screen.getByText('Fetched Data!'));
  expect(dataElement).toBeInTheDocument();
});