How do I test asynchronous code in React 18?

How do I test asynchronous code in React 18?

In React 18, you can use the @testing-library/react library along with async/await to test asynchronous code. You can use waitFor to wait for elements 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!'));
  expect(screen.getByText('Hello, World!')).toBeInTheDocument();
});

What if I need to mock an API call?

You can use jest.mock to mock your API calls. For example:

jest.mock('./api', () => ({ fetchData: jest.fn() }));

Are there any best practices for testing in React?

Yes! Some best practices include testing user interactions, keeping tests isolated, and using descriptive test names.