Testing React Components with React Testing Library

React Testing Library Fundamentals

1. Basic Component Testing

// Component to test
function Greeting({ name = 'Stranger' }) {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>Welcome to our application.</p>
    </div>
  );
}

// Basic test
import { render, screen } from '@testing-library/react';

describe('Greeting', () => {
  test('renders greeting with default name', () => {
    render(<Greeting />);
    
    // Find elements by text
    const heading = screen.getByText('Hello, Stranger!');
    expect(heading).toBeInTheDocument();
    
    const welcome = screen.getByText('Welcome to our application.');
    expect(welcome).toBeInTheDocument();
  });
  
  test('renders greeting with custom name', () => {
    render(<Greeting name="John" />);
    
    const heading = screen.getByText('Hello, John!');
    expect(heading).toBeInTheDocument();
  });
});

// More complex component
function LoginForm({ onSubmit }) {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  
  const handleSubmit = (e) => {
    e.preventDefault();
    if (!email || !password) {
      setError('All fields are required');
      return;
    }
    onSubmit({ email, password });
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <h2>Login</h2>
      {error && <div role="alert">{error}</div>}
      
      <div>
        <label htmlFor="email">Email:</label>
        <input
          id="email"
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
      </div>
      
      <div>
        <label htmlFor="password">Password:</label>
        <input
          id="password"
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
      </div>
      
      <button type="submit">Login</button>
    </form>
  );
}

// Testing the LoginForm
import { render, screen, fireEvent } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

describe('LoginForm', () => {
  test('renders login form with all fields', () => {
    const handleSubmit = jest.fn();
    render(<LoginForm onSubmit={handleSubmit} />);
    
    expect(screen.getByLabelText('Email:')).toBeInTheDocument();
    expect(screen.getByLabelText('Password:')).toBeInTheDocument();
    expect(screen.getByRole('button', { name: 'Login' })).toBeInTheDocument();
  });
  
  test('shows error when submitting empty form', () => {
    const handleSubmit = jest.fn();
    render(<LoginForm onSubmit={handleSubmit} />);
    
    fireEvent.click(screen.getByRole('button', { name: 'Login' }));
    
    expect(screen.getByRole('alert')).toHaveTextContent('All fields are required');
    expect(handleSubmit).not.toHaveBeenCalled();
  });
  
  test('submits form with email and password', async () => {
    const handleSubmit = jest.fn();
    const user = userEvent.setup();
    
    render(<LoginForm onSubmit={handleSubmit} />);
    
    await user.type(screen.getByLabelText('Email:'), 'test@example.com');
    await user.type(screen.getByLabelText('Password:'), 'password123');
    await user.click(screen.getByRole('button', { name: 'Login' }));
    
    expect(handleSubmit).toHaveBeenCalledWith({
      email: 'test@example.com',
      password: 'password123'
    });
  });
});

2. Query Methods

// Different query methods
function QueryExamples() {
  return (
    <div>
      <h1>Query Examples</h1>
      <button>Click me</button>
      <input type="text" placeholder="Enter text" />
      <img src="test.jpg" alt="Test image" />
      <label htmlFor="username">Username</label>
      <input id="username" />
      <div data-testid="custom-element">Custom Element</div>
    </div>
  );
}

test('demonstrates query methods', () => {
  render(<QueryExamples />);
  
  // getBy - throws error if not found
  const heading = screen.getByRole('heading', { name: 'Query Examples' });
  expect(heading).toBeInTheDocument();
  
  // queryBy - returns null if not found
  const missingElement = screen.queryByRole('alert');
  expect(missingElement).not.toBeInTheDocument();
  
  // findBy - returns a promise, waits for element
  // Useful for async operations
  
  // Different query types:
  
  // By Role (preferred)
  const button = screen.getByRole('button', { name: 'Click me' });
  
  // By Label Text
  const input = screen.getByLabelText('Username');
  
  // By Placeholder Text
  const textInput = screen.getByPlaceholderText('Enter text');
  
  // By Alt Text
  const image = screen.getByAltText('Test image');
  
  // By Test ID (last resort)
  const customElement = screen.getByTestId('custom-element');
});

// Query priority (from most to least preferred):
// 1. getByRole
// 2. getByLabelText
// 3. getByPlaceholderText
// 4. getByText
// 5. getByDisplayValue
// 6. getByAltText
// 7. getByTitle
// 8. getByTestId

3. User Events

// Testing user interactions
import userEvent from '@testing-library/user-event';

function InteractiveForm() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    agreeToTerms: false,
    country: ''
  });
  
  const handleChange = (e) => {
    const { name, value, type, checked } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: type === 'checkbox' ? checked : value
    }));
  };
  
  return (
    <form>
      <input
        name="name"
        value={formData.name}
        onChange={handleChange}
        placeholder="Your name"
      />
      
      <input
        name="email"
        type="email"
        value={formData.email}
        onChange={handleChange}
        placeholder="Your email"
      />
      
      <select
        name="country"
        value={formData.country}
        onChange={handleChange}
      >
        <option value="">Select country</option>
        <option value="us">United States</option>
        <option value="uk">United Kingdom</option>
        <option value="ca">Canada</option>
      </select>
      
      <label>
        <input
          type="checkbox"
          name="agreeToTerms"
          checked={formData.agreeToTerms}
          onChange={handleChange}
        />
        I agree to terms
      </label>
      
      <div>
        {JSON.stringify(formData, null, 2)}
      </div>
    </form>
  );
}

test('handles form interactions', async () => {
  const user = userEvent.setup();
  render(<InteractiveForm />);
  
  // Type in input fields
  await user.type(screen.getByPlaceholderText('Your name'), 'John Doe');
  await user.type(screen.getByPlaceholderText('Your email'), 'john@example.com');
  
  // Select from dropdown
  await user.selectOptions(screen.getByRole('combobox'), 'us');
  
  // Click checkbox
  await user.click(screen.getByRole('checkbox'));
  
  // Verify form state is updated
  expect(screen.getByText(/"name": "John Doe"/)).toBeInTheDocument();
  expect(screen.getByText(/"email": "john@example.com"/)).toBeInTheDocument();
  expect(screen.getByText(/"country": "us"/)).toBeInTheDocument();
  expect(screen.getByText(/"agreeToTerms": true/)).toBeInTheDocument();
});

// Advanced user interactions
function AdvancedInteractions() {
  const [clickCount, setClickCount] = useState(0);
  const [hoverText, setHoverText] = useState('');
  const [keyPressed, setKeyPressed] = useState('');
  
  return (
    <div>
      <button
        onClick={() => setClickCount(c => c + 1)}
        onDoubleClick={() => setClickCount(c => c + 10)}
      >
        Clicks: {clickCount}
      </button>
      
      <div
        onMouseEnter={() => setHoverText('Mouse entered!')}
        onMouseLeave={() => setHoverText('Mouse left!')}
      >
        Hover me: {hoverText}
      </div>
      
      <input
        onKeyDown={(e) => setKeyPressed(e.key)}
        placeholder="Press a key"
      />
      
      <div>Last key: {keyPressed}</div>
    </div>
  );
}

test('handles advanced interactions', async () => {
  const user = userEvent.setup();
  render(<AdvancedInteractions />);
  
  // Single click
  await user.click(screen.getByRole('button'));
  expect(screen.getByText('Clicks: 1')).toBeInTheDocument();
  
  // Double click
  await user.dblClick(screen.getByRole('button'));
  expect(screen.getByText('Clicks: 11')).toBeInTheDocument();
  
  // Hover interactions
  const hoverDiv = screen.getByText(/Hover me:/);
  await user.hover(hoverDiv);
  expect(screen.getByText('Mouse entered!')).toBeInTheDocument();
  
  await user.unhover(hoverDiv);
  expect(screen.getByText('Mouse left!')).toBeInTheDocument();
  
  // Keyboard interactions
  const input = screen.getByPlaceholderText('Press a key');
  await user.type(input, 'a');
  expect(screen.getByText('Last key: a')).toBeInTheDocument();
});