HomeReact
Chapter 18
04 — React Testing Library
Setup
npm install --save-dev @testing-library/react @testing-library/jest-domBasic Tests
import { render, screen, fireEvent } from '@testing-library/react';
import Button from './Button';
test('renders button with text', () => {
render(<Button>Click me</Button>);
expect(screen.getByText('Click me')).toBeInTheDocument();
});
test('calls onClick when clicked', () => {
const handleClick = jest.fn();
render(<Button onClick={handleClick}>Click</Button>);
fireEvent.click(screen.getByText('Click'));
expect(handleClick).toHaveBeenCalledTimes(1);
});Async Testing
import { waitFor } from '@testing-library/react';
test('loads data', async () => {
render(<DataComponent />);
const element = await waitFor(() => screen.getByText('Loaded'));
expect(element).toBeInTheDocument();
});Key Takeaways
- Test user behavior, not implementation
- Use
screenqueries for accessibility waitForfor async operationsfireEventfor interactions