How can I effectively test asynchronous code using Testing Library?

How can I effectively test asynchronous code using Testing Library?

You can use waitFor and findBy queries to handle asynchronous code in Testing Library. Would you like an example?

Yes, please provide an example of testing a component that fetches data.

Sure! Here's a simple example:

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

test('fetches and displays data', async () => {
  render(<MyComponent />);
  const dataElement = await screen.findByText(/data loaded/i);
  expect(dataElement).toBeInTheDocument();
});

This tests that the component displays the fetched data.

What if the fetch fails? How can I test that?

You can mock the fetch call to simulate a failure. Here's how:

jest.mock('node-fetch');
import fetch from 'node-fetch';

test('handles fetch error', async () => {
  fetch.mockImplementationOnce(() => Promise.reject('API is down'));
  render(<MyComponent />);
  const errorElement = await screen.findByText(/error loading data/i);
  expect(errorElement).toBeInTheDocument();
});

This checks if the error message is displayed when the fetch fails.