How do I handle errors in React 18 with Testing Library?

How do I handle errors in React 18 with Testing Library?

In React 18, you can handle errors in your tests by using the waitFor utility from Testing Library. This allows you to wait for certain conditions to be met before proceeding.

Can you give me an example of how to use waitFor?

Sure! Here's a simple example:

import { render, screen, waitFor } from '@testing-library/react';
import MyComponent from './MyComponent';

test('displays error message on failure', async () => {
  render(<MyComponent />);
  await waitFor(() => {
    expect(screen.getByText(/error occurred/i)).toBeInTheDocument();
  });
});

What if I want to test a network error?

For network errors, you can mock your API calls using libraries like msw (Mock Service Worker) to simulate error responses.