How do I use async/await with Testing Library?

How do I use async/await with Testing Library?

You can use async/await in Testing Library to handle asynchronous operations in your tests. For example, you can use waitFor to wait for an element to appear.

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

What if the element doesn't appear?

If the element doesn't appear, waitFor will throw an error after the timeout. You can adjust the timeout by passing an options object to waitFor.

Is there a way to test loading states?

Yes! You can test loading states by checking for a loading indicator before the data is loaded, using async/await to wait for the final state.