How do I test asynchronous code in React Testing Library?

How do I test asynchronous code in React Testing Library?

You can test asynchronous code in React Testing Library using the waitFor function or by using findBy queries.

Can you give me an example of using waitFor?

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 />);
  await waitFor(() => expect(screen.getByText('Hello, World!')).toBeInTheDocument());
});

What about using findBy queries?

findBy queries are great for testing async elements. Here's an 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, World!');
  expect(greeting).toBeInTheDocument();
});