React Testing Library: Philosophy & Accessible Queries

1import React, { useState } from 'react';
2import { render, screen } from '@testing-library/react';
3import userEvent from '@testing-library/user-event';
4
5// Component under test
6export function LoginForm({ onSubmit }: { onSubmit: (data: { email: string }) => void }) {
7  const [email, setEmail] = useState('');
8  const [error, setError] = useState('');
9
10  const handleSubmit = (e: React.FormEvent) => {
11    e.preventDefault();
12    if (!email.includes('@')) {
13      setError('Invalid email address');
14      return;
15    }
16    onSubmit({ email });
17  };
18
19  return (
20    <form onSubmit={handleSubmit}>
21      <label htmlFor="email-input">Email Address</label>
22      <input
23        id="email-input"
24        type="email"
25        value={email}
26        onChange={(e) => setEmail(e.target.value)}
27      />
28      {error && <p role="alert">{error}</p>}
29      <button type="submit">Log In</button>
30    </form>
31  );
32}
33
34// Idiomatic Behavior-Driven Test
35test('validates email format and calls onSubmit when valid', async () => {
36  const user = userEvent.setup();
37  const mockSubmit = jest.fn();
38
39  render(<LoginForm onSubmit={mockSubmit} />);
40
41  // 1. Accessible Queries: getByRole & getByLabelText (resembles real user interactions)
42  const emailInput = screen.getByLabelText(/email address/i);
43  const submitButton = screen.getByRole('button', { name: /log in/i });
44
45  // 2. Assert element is absent: queryBy returns null instead of throwing!
46  expect(screen.queryByRole('alert')).not.toBeInTheDocument();
47
48  // 3. User interactions with realistic typing delays and events
49  await user.type(emailInput, 'invalid-email');
50  await user.click(submitButton);
51
52  // 4. Assert error message appeared
53  expect(screen.getByRole('alert')).toHaveTextContent(/invalid email address/i);
54  expect(mockSubmit).not.toHaveBeenCalled();
55
56  // 5. Correct input and submit
57  await user.clear(emailInput);
58  await user.type(emailInput, 'user@faangprep.com');
59  await user.click(submitButton);
60
61  expect(mockSubmit).toHaveBeenCalledWith({ email: 'user@faangprep.com' });
62});