How do I test asynchronous queries in React Testing Library?

How do I test asynchronous queries in React Testing Library?

You can use the findBy queries provided by React Testing Library to test asynchronous behavior. For example, if you have a component that fetches data, you can use findByText to wait for the text to appear.

Can you show me an example of that?

Sure! Here's a simple example:

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

test('loads and displays greeting', async () => {
  render(<MyComponent />);
  const greeting = await screen.findByText(/hello/i);
  expect(greeting).toBeInTheDocument();
});

What if the query fails or takes too long?

If the query fails or takes too long, you can use the waitFor utility to handle timeouts and errors gracefully. You can also set a timeout for your queries.