How do I handle asynchronous code in React Testing Library?

How do I handle asynchronous code in React Testing Library?

You can use the waitFor function to handle asynchronous code. It allows you to wait for certain conditions to be met before proceeding.

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 if I need to test a promise that resolves after a delay?

You can use jest.advanceTimersByTime to simulate the passage of time in your tests. This allows you to control when the promise resolves.

Thanks! Is there anything else I should know about testing async code?

Yes! Always ensure to clean up after your tests and consider using findBy queries, which automatically wait for elements to appear.