What are the basics of using async/await with Testing Library?

What are the basics of using async/await with Testing Library?

Using async/await with Testing Library allows you to handle asynchronous code in your tests more effectively. You can use waitFor, findBy, and other async utilities to wait for elements to appear or change.

Can you give me an example of how to use it in a test?

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 element doesn't appear within a certain time?

If the element doesn't appear within the default timeout, the test will fail. You can customize the timeout by passing an options object to findBy methods, like this:

const greeting = await screen.findByText(/hello/i, { timeout: 3000 });

Are there any best practices for using async/await in tests?

Yes! Always ensure that your tests are clear and concise. Use async utilities provided by Testing Library, and avoid using setTimeout or setInterval in your tests to keep them reliable.