How do I use async assertions in Testing Library?

How do I use async assertions in Testing Library?

You can use async assertions in Testing Library by utilizing the waitFor function or the findBy queries. This allows you to wait for elements to appear or change state.

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('it shows the loading state', async () => {
  render(<MyComponent />);
  await waitFor(() => expect(screen.getByText('Loaded')).toBeInTheDocument());
});

What about using findBy queries?

findBy queries are great for async assertions as they automatically wait for the element to appear. For example:

const element = await screen.findByText('Loaded');
expect(element).toBeInTheDocument();

Are there any common pitfalls to avoid?

Yes, a common pitfall is not waiting long enough for the element to appear, which can lead to false negatives in your tests. Always ensure your async code is properly handled.