Jest React Testing

# Jest React Testing Examples

Comprehensive collection of real-world testing examples covering common scenarios and patterns in React application testing.

## Table of Contents

1. [Basic Component Testing](#1-basic-component-testing)
2. [Form Testing with Validation](#2-form-testing-with-validation)
3. [Async API Data Fetching](#3-async-api-data-fetching)
4. [User Authentication Flow](#4-user-authentication-flow)
5. [Modal and Dialog Testing](#5-modal-and-dialog-testing)
6. [Dropdown and Select Testing](#6-dropdown-and-select-testing)
7. [Testing Custom Hooks](#7-testing-custom-hooks)
8. [Testing with React Router](#8-testing-with-react-router)
9. [Testing with Redux](#9-testing-with-redux)
10. [Testing with Context API](#10-testing-with-context-api)
11. [File Upload Component](#11-file-upload-component)
12. [Autocomplete Component](#12-autocomplete-component)
13. [Infinite Scroll List](#13-infinite-scroll-list)
14. [Error Boundary Testing](#14-error-boundary-testing)
15. [Accessibility Testing](#15-accessibility-testing)
16. [Testing Timers and Intervals](#16-testing-timers-and-intervals)
17. [Testing WebSocket Integration](#17-testing-websocket-integration)
18. [Multi-step Form Wizard](#18-multi-step-form-wizard)

---

## 1. Basic Component Testing

### Component: Button

```javascript
// Button.jsx
export const Button = ({
  children,
  variant = 'primary',
  disabled = false,
  onClick
}) => {
  return (
    <button
      className={`btn btn-${variant}`}
      disabled={disabled}
      onClick={onClick}
    >
      {children}
    </button>
  );
};
```

### Tests

```javascript
// Button.test.jsx
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Button } from './Button';

describe('Button Component', () => {
  it('renders with children text', () => {
    render(<Button>Click Me</Button>);

    expect(screen.getByRole('button', { name: /click me/i })).toBeInTheDocument();
  });

  it('applies correct variant class', () => {
    render(<Button variant="secondary">Secondary</Button>);

    const button = screen.getByRole('button');
    expect(button).toHaveClass('btn-secondary');
  });

  it('applies primary variant by default', () => {
    render(<Button>Default</Button>);

    const button = screen.getByRole('button');
    expect(button).toHaveClass('btn-primary');
  });

  it('calls onClick handler when clicked', async () => {
    const user = userEvent.setup();
    const handleClick = jest.fn();

    render(<Button onClick={handleClick}>Click</Button>);

    await user.click(screen.getByRole('button'));

    expect(handleClick).toHaveBeenCalledTimes(1);
  });

  it('does not call onClick when disabled', async () => {
    const user = userEvent.setup();
    const handleClick = jest.fn();

    render(<Button onClick={handleClick} disabled>Disabled</Button>);

    const button = screen.getByRole('button');

    // Verify button is disabled
    expect(button).toBeDisabled();

    // Try to click - should not work
    await user.click(button);

    expect(handleClick).not.toHaveBeenCalled();
  });
});
```

---

## 2. Form Testing with Validation

### Component: LoginForm

```javascript
// LoginForm.jsx
import { useState } from 'react';

export const LoginForm = ({ onSubmit }) => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [errors, setErrors] = useState({});

  const validate = () => {
    const newErrors = {};

    if (!email) {
      newErrors.email = 'Email is required';
    } else if (!/\S+@\S+\.\S+/.test(email)) {
      newErrors.email = 'Email is invalid';
    }

    if (!password) {
      newErrors.password = 'Password is required';
    } else if (password.length < 8) {
      newErrors.password = 'Password must be at least 8 characters';
    }

    return newErrors;
  };

  const handleSubmit = (e) => {
    e.preventDefault();

    const newErrors = validate();

    if (Object.keys(newErrors).leng