React Testing Basics

Test components to ensure they work correctly.

Simple Test

```javascript 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

```javascript 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

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

Async Testing

```javascript 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!