How do I write integration tests for a React 18 app using Testing Library?

How do I write integration tests for a React 18 app using Testing Library?

To write integration tests for a React 18 app using Testing Library, you can follow these steps: 1. Set up your testing environment with Jest and React Testing Library. 2. Create a test file for your component. 3. Use render from Testing Library to render your component. 4. Simulate user interactions with fireEvent or userEvent. 5. Use assertions to check if the expected output is rendered.

Can you show me an example of a simple integration test?

Sure! Here's a simple example:

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

test('it shows the correct text when the button is clicked', () => {
  render(<MyComponent />);
  fireEvent.click(screen.getByText('Click me'));
  expect(screen.getByText('You clicked the button!')).toBeInTheDocument();
});

What should I do if my test fails?

If your test fails, check the following: 1. Ensure that the component renders correctly. 2. Verify that the user interactions are simulated properly. 3. Check the assertions to make sure they match the expected output. 4. Use debugging tools like console.log to inspect the component's state.

Are there any best practices for writing integration tests?

Yes! Some best practices include: 1. Keep tests isolated and independent. 2. Use descriptive test names. 3. Avoid testing implementation details. 4. Clean up after tests to prevent side effects. 5. Use beforeEach to set up common test scenarios.