HomeReact
Chapter 18

04 — React Testing Library

Setup

npm install --save-dev @testing-library/react @testing-library/jest-dom

Basic 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 screen queries for accessibility
  • waitFor for async operations
  • fireEvent for interactions