React Testing Basics

Test components to ensure they work correctly.

Simple Test

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

test('renders button', () => {
  render(<Button>Click Me</Button>);
  const button = screen.getByText('Click Me');
  expect(button).toBeInTheDocument();
});

Testing User Events

import { fireEvent } from '@testing-library/react';

test('button click', () => {
  const handleClick = jest.fn();
  render(<Button onClick={handleClick}>Click</Button>);
  
  const button = screen.getByText('Click');
  fireEvent.click(button);
  
  expect(handleClick).toHaveBeenCalledTimes(1);
});

Testing State

test('counter increments', () => {
  render(<Counter />);
  
  const button = screen.getByText('+');
  fireEvent.click(button);
  
  expect(screen.getByText('Count: 1')).toBeInTheDocument();
});

Async Testing

test('loads users', async () => {
  render(<UserList />);
  
  const users = await screen.findByText('John Doe');
  expect(users).toBeInTheDocument();
});

Remember

• Test user behavior
• Don't test implementation details
• Use findBy for async
• Mock API calls

Next: Learn debugging techniques!