Beginner

import { render, screen } from "@testing-library/react";
// => Imports core Testing Library utilities
// => render: mounts component into jsdom document
// => screen: global query object bound to document.body
 
function Greeting() {
  // => Simple React component for demonstration
  return <h1>Hello, World!</h1>;
  // => Renders an h1 element with text content
}
 
test("renders greeting", () => {
  // => Defines a synchronous test (no async needed for static content)
  render(<Greeting />);
  // => Mounts Greeting into jsdom
  // => DOM now contains: <h1>Hello, World!</h1>
 
  const heading = screen.getByText("Hello, World!");
  // => Queries DOM for element with exact text "Hello, World!"
  // => Returns HTMLElement if found, throws if not found
  // => heading: <h1>Hello, World!</h1>
 
  expect(heading).toBeInTheDocument();
  // => Asserts element exists in document.body
  // => Jest-dom matcher (from @testing-library/jest-dom)
  // => Passes: heading is mounted and visible
});

import { render, screen } from "@testing-library/react";
// => Both from same package - render mounts, screen queries
 
function Counter() {
  // => Simple counter component for isolation testing
  return <div>Count: 0</div>;
  // => Static for simplicity, shows current count
}
 
test("first test - renders counter", () => {
  render(<Counter />);
  // => Mounts Counter into fresh jsdom
  // => DOM state: <div>Count: 0</div>
 
  expect(screen.getByText("Count: 0")).toBeInTheDocument();
  // => Finds element by text content
  // => Passes: text "Count: 0" is present
  // => After this test, cleanup() runs automatically
});
 
test("second test - DOM is clean", () => {
  // => New test starts with empty document.body
  // => Previous test's DOM has been removed by cleanup()
 
  expect(screen.queryByText("Count: 0")).toBeNull();
  // => queryByText: returns null if not found (vs getByText throws)
  // => Proves cleanup removed previous test's DOM
  // => toBeNull(): asserts element is not present
});

import { render, screen } from "@testing-library/react";
 
interface AlertProps {
  // => TypeScript interface defines component's prop contract
  type: "success" | "error" | "warning";
  // => type: controls visual style and meaning
  message: string;
  // => message: the text content to display
}
 
function Alert({ type, message }: AlertProps) {
  // => Destructures props for clean access
  return (
    <div role="alert" data-testid={`alert-${type}`}>
      {/* role="alert": semantic role for assistive technologies */}
      {/* data-testid: escape hatch for testing by test ID */}
      <span>{type.toUpperCase()}: </span>
      {/* Displays type label in uppercase */}
      <span>{message}</span>
      {/* Displays the message content */}
    </div>
  );
}
 
test("renders success alert with message", () => {
  render(<Alert type="success" message="Operation completed" />);
  // => Renders Alert with specific prop values
  // => DOM: <div role="alert" data-testid="alert-success">SUCCESS: Operation completed</div>
 
  expect(screen.getByRole("alert")).toBeInTheDocument();
  // => Queries by ARIA role "alert"
  // => Accessibility-first query: preferred over querying by class
 
  expect(screen.getByText("Operation completed")).toBeInTheDocument();
  // => Verifies message prop renders correctly
  // => Finds element containing this exact text substring
 
  expect(screen.getByTestId("alert-success")).toBeInTheDocument();
  // => Queries by data-testid attribute
  // => Use sparingly: prefer role/text/label queries
});

import { render, screen } from "@testing-library/react";
 
function UserCard({ name, email }: { name: string; email: string }) {
  // => Component with two pieces of user data
  return (
    <article>
      {/* article: semantic element for self-contained content */}
      <h2>{name}</h2>
      {/* h2: heading for user name */}
      <p>{email}</p>
      {/* p: paragraph for email address */}
    </article>
  );
}
 
test("render return values", () => {
  const { container, unmount, rerender } = render(
    // => Destructures useful utilities from render result
    // => container: HTMLDivElement wrapping the rendered output
    // => unmount: function to unmount component (test cleanup effects)
    // => rerender: function to re-render with different props
    <UserCard name="Alice" email="alice@example.com" />
  );
 
  expect(container.querySelector("article")).toBeInTheDocument();
  // => container.querySelector: DOM query within container
  // => Useful when role/text queries are insufficient
  // => Returns the <article> element
 
  expect(screen.getByText("alice@example.com")).toBeInTheDocument();
  // => screen.getByText: searches entire document.body
  // => Equivalent to container.getByText for single-component tests
 
  rerender(<UserCard name="Bob" email="bob@example.com" />);
  // => Re-renders with new props (simulates state-driven prop changes)
  // => Triggers React re-render cycle
  // => DOM updates with new values
 
  expect(screen.getByText("Bob")).toBeInTheDocument();
  // => Verifies rerender updated the name
  expect(screen.queryByText("Alice")).not.toBeInTheDocument();
  // => Verifies old name is gone after rerender
  // => queryByText: returns null (not throws) if missing
});

import { render, screen } from "@testing-library/react";
 
const fruits = ["Apple", "Banana", "Cherry"];
// => Sample data array for list rendering
 
function FruitList({ items }: { items: string[] }) {
  // => Component renders an unordered list from array
  return (
    <ul>
      {items.map((item) => (
        <li key={item}>{item}</li>
        // => Each fruit becomes a list item
        // => key: React's reconciliation key (use unique value)
      ))}
    </ul>
  );
}
 
test("renders all list items", () => {
  render(<FruitList items={fruits} />);
  // => Mounts FruitList with 3-item array
  // => DOM: <ul><li>Apple</li><li>Banana</li><li>Cherry</li></ul>
 
  const listItems = screen.getAllByRole("listitem");
  // => getAllByRole: returns array of all matching elements
  // => "listitem": ARIA role for <li> elements
  // => listItems: [<li>Apple</li>, <li>Banana</li>, <li>Cherry</li>]
 
  expect(listItems).toHaveLength(3);
  // => Verifies correct number of items rendered
  // => Passes: array has 3 elements
 
  expect(listItems[0]).toHaveTextContent("Apple");
  // => toHaveTextContent: checks element's text content
  // => Verifies first item is "Apple"
 
  fruits.forEach((fruit) => {
    // => Iterates through source data to verify each item
    expect(screen.getByText(fruit)).toBeInTheDocument();
    // => getByText: finds element with exact text match
    // => Verifies every fruit appears in the rendered list
  });
});

import { render, screen } from "@testing-library/react";
 
function ActionBar() {
  // => Component with buttons and a link
  return (
    <div>
      <button>Save</button>
      {/* role="button" implicitly */}
      <button disabled>Delete</button>
      {/* disabled button: role="button" but not interactive */}
      <a href="/home">Go Home</a>
      {/* role="link" implicitly (has href) */}
    </div>
  );
}
 
test("getByRole queries for interactive elements", () => {
  render(<ActionBar />);
  // => Mounts ActionBar into jsdom
 
  const saveButton = screen.getByRole("button", { name: "Save" });
  // => getByRole("button"): finds elements with button role
  // => { name: "Save" }: filters by accessible name
  // => Accessible name comes from text content for buttons
  // => saveButton: <button>Save</button>
 
  expect(saveButton).toBeEnabled();
  // => toBeEnabled(): asserts button is not disabled
  // => Passes: Save button has no disabled attribute
 
  const deleteButton = screen.getByRole("button", { name: "Delete" });
  // => Finds Delete button by role and name
  // => deleteButton: <button disabled>Delete</button>
 
  expect(deleteButton).toBeDisabled();
  // => toBeDisabled(): asserts element has disabled attribute
  // => Passes: Delete button is disabled
 
  const homeLink = screen.getByRole("link", { name: "Go Home" });
  // => getByRole("link"): finds <a> elements with href
  // => { name: "Go Home" }: matches by link text
  // => homeLink: <a href="/home">Go Home</a>
 
  expect(homeLink).toHaveAttribute("href", "/home");
  // => toHaveAttribute: checks element attribute value
  // => Verifies link goes to correct destination
});

import { render, screen } from "@testing-library/react";
 
function ArticlePage() {
  // => Article with proper heading hierarchy
  return (
    <article>
      <h1>Main Article Title</h1>
      {/* h1: document title - only one per page */}
      <h2>Section One</h2>
      {/* h2: major section heading */}
      <p>Section content here.</p>
      <h2>Section Two</h2>
      {/* h2: another major section */}
      <h3>Subsection</h3>
      {/* h3: subsection under Section Two */}
    </article>
  );
}
 
test("heading hierarchy and levels", () => {
  render(<ArticlePage />);
  // => Mounts ArticlePage with heading structure
 
  const mainTitle = screen.getByRole("heading", { level: 1 });
  // => getByRole("heading"): finds heading elements (h1-h6)
  // => { level: 1 }: filters to h1 specifically
  // => mainTitle: <h1>Main Article Title</h1>
 
  expect(mainTitle).toHaveTextContent("Main Article Title");
  // => Verifies h1 contains correct text
  // => toHaveTextContent: checks text content of element
 
  const sectionHeadings = screen.getAllByRole("heading", { level: 2 });
  // => getAllByRole: returns array of all h2 elements
  // => level: 2 filters to h2 only (not h1 or h3)
  // => sectionHeadings: [<h2>Section One</h2>, <h2>Section Two</h2>]
 
  expect(sectionHeadings).toHaveLength(2);
  // => Verifies exactly 2 h2 headings exist
  // => Catches both missing and extra headings
 
  const subsection = screen.getByRole("heading", { level: 3 });
  // => Gets the single h3 element
  expect(subsection).toHaveTextContent("Subsection");
  // => Verifies subsection heading content
});

import { render, screen } from "@testing-library/react";
 
function LoginForm() {
  // => Login form with labeled inputs
  return (
    <form>
      <label htmlFor="email">Email</label>
      {/* label: associates with input via htmlFor */}
      <input id="email" type="email" placeholder="Enter email" />
      {/* type="email": role="textbox" + email validation */}
 
      <label htmlFor="password">Password</label>
      <input id="password" type="password" />
      {/* type="password": no specific ARIA role, use getByLabelText */}
 
      <input type="checkbox" id="remember" />
      <label htmlFor="remember">Remember me</label>
      {/* checkbox: role="checkbox" implicitly */}
 
      <button type="submit">Sign In</button>
      {/* submit button: role="button" */}
    </form>
  );
}
 
test("form element roles", () => {
  render(<LoginForm />);
  // => Mounts form with various input types
 
  const emailInput = screen.getByRole("textbox", { name: "Email" });
  // => type="email" input has role="textbox"
  // => { name: "Email" }: matches by associated label text
  // => emailInput: <input id="email" type="email" ...>
 
  expect(emailInput).toBeInTheDocument();
  // => Verifies email input rendered correctly
 
  expect(emailInput).toHaveAttribute("placeholder", "Enter email");
  // => Checks placeholder attribute value
 
  const checkbox = screen.getByRole("checkbox", { name: "Remember me" });
  // => type="checkbox" has role="checkbox"
  // => Accessible name comes from associated label
  // => checkbox: <input type="checkbox" id="remember">
 
  expect(checkbox).not.toBeChecked();
  // => not.toBeChecked(): asserts checkbox is unchecked
  // => Initial state: unchecked
 
  const submitButton = screen.getByRole("button", { name: "Sign In" });
  // => type="submit" button has role="button"
  // => Accessible name from button text content
  expect(submitButton).toHaveAttribute("type", "submit");
  // => Verifies button is a submit button
});

import { render, screen } from "@testing-library/react";
 
function DataTable() {
  // => Simple data table with proper semantics
  return (
    <table>
      <thead>
        <tr>
          <th scope="col">Name</th>
          {/* scope="col": associates header with column */}
          <th scope="col">Score</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Alice</td>
          <td>95</td>
        </tr>
        <tr>
          <td>Bob</td>
          <td>87</td>
        </tr>
      </tbody>
    </table>
  );
}
 
function SiteNav() {
  // => Navigation with semantic nav element
  return (
    <nav aria-label="Main navigation">
      {/* aria-label: provides accessible name for nav landmark */}
      <a href="/">Home</a>
      <a href="/about">About</a>
    </nav>
  );
}
 
test("table and navigation roles", () => {
  render(
    <div>
      <SiteNav />
      <DataTable />
    </div>
  );
  // => Renders both components together
 
  const nav = screen.getByRole("navigation", { name: "Main navigation" });
  // => role="navigation": matches <nav> element
  // => { name: "Main navigation" }: matches by aria-label value
  expect(nav).toBeInTheDocument();
  // => Verifies navigation landmark exists
 
  const table = screen.getByRole("table");
  // => role="table": matches <table> element
  // => No name option: only one table exists
  expect(table).toBeInTheDocument();
 
  const columnHeaders = screen.getAllByRole("columnheader");
  // => role="columnheader": matches <th scope="col"> elements
  // => Returns array of all column headers
  expect(columnHeaders).toHaveLength(2);
  // => Verifies both column headers rendered
 
  const rows = screen.getAllByRole("row");
  // => role="row": matches all <tr> elements (header + data rows)
  // => rows: [header row, Alice row, Bob row]
  expect(rows).toHaveLength(3);
  // => 1 header row + 2 data rows = 3 total
});

import { render, screen } from "@testing-library/react";
import { useState } from "react";
 
function ModalExample() {
  // => Component with toggle-able modal dialog
  const [isOpen, setIsOpen] = useState(false);
  // => isOpen: controls modal visibility
 
  return (
    <div>
      <button onClick={() => setIsOpen(true)}>Open Modal</button>
      {/* Trigger button to show modal */}
      {isOpen && (
        <div role="dialog" aria-modal="true" aria-label="Confirmation dialog">
          {/* role="dialog": semantic dialog role */}
          {/* aria-modal="true": tells screen readers content outside is inert */}
          {/* aria-label: provides accessible name for the dialog */}
          <h2>Are you sure?</h2>
          <p>This action cannot be undone.</p>
          <button onClick={() => setIsOpen(false)}>Confirm</button>
          <button onClick={() => setIsOpen(false)}>Cancel</button>
        </div>
      )}
      <div role="alert">
        {/* role="alert": live region, announced immediately by screen readers */}
        Status: Ready
      </div>
    </div>
  );
}
 
test("dialog and alert roles", () => {
  render(<ModalExample />);
  // => Mounts ModalExample, modal initially hidden
 
  expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
  // => queryByRole: returns null (not throws) when not found
  // => Verifies modal is hidden initially
 
  const alertRegion = screen.getByRole("alert");
  // => role="alert": live region element
  // => Announced automatically by screen readers when content changes
  expect(alertRegion).toHaveTextContent("Status: Ready");
  // => Verifies alert content is correct
 
  const openButton = screen.getByRole("button", { name: "Open Modal" });
  // => Finds the trigger button by accessible name
  expect(openButton).toBeInTheDocument();
  // => Button is always present (not conditionally rendered)
});

import { render, screen } from "@testing-library/react";
 
function ProductCard() {
  // => Product display component with various text elements
  return (
    <div>
      <h2>Premium Widget</h2>
      {/* Exact text: "Premium Widget" */}
      <p>This is a high-quality widget for professionals.</p>
      {/* Longer text with "widget" as substring */}
      <span>Price: $29.99</span>
      {/* Price with special characters */}
      <button>Add to Cart</button>
    </div>
  );
}
 
test("getByText matching strategies", () => {
  render(<ProductCard />);
  // => Mounts ProductCard
 
  const title = screen.getByText("Premium Widget");
  // => Exact match: finds element with text "Premium Widget"
  // => Matches <h2>Premium Widget</h2>
  // => Default: exact: true (full text content match)
  expect(title.tagName).toBe("H2");
  // => tagName: HTML element type in uppercase
  // => Verifies the h2 element was found
 
  const description = screen.getByText(/high-quality widget/i);
  // => Regex match: finds element containing "high-quality widget"
  // => /i flag: case-insensitive matching
  // => Finds the <p> element containing this phrase
  expect(description).toBeInTheDocument();
 
  const price = screen.getByText(/\$29\.99/);
  // => Regex with escaped special chars
  // => \$ matches literal dollar sign
  // => \. matches literal period (not any char)
  // => Finds <span>Price: $29.99</span>
  expect(price).toHaveTextContent("$29.99");
  // => toHaveTextContent: checks partial text match within element
});

import { render, screen } from "@testing-library/react";
 
function FormattedContent() {
  // => Component with irregular whitespace and mixed casing
  return (
    <div>
      <p>  Welcome   to   Testing Library  </p>
      {/* Multiple spaces in text (normalized by default) */}
      <span>Status: ACTIVE</span>
      {/* All-caps text */}
      <div>
        <strong>Total:</strong> $150.00
        {/* Text split across elements */}
      </div>
    </div>
  );
}
 
test("text normalization and function matchers", () => {
  render(<FormattedContent />);
  // => Mounts FormattedContent
 
  const welcome = screen.getByText("Welcome to Testing Library");
  // => Default normalization collapses whitespace
  // => "  Welcome   to   Testing Library  " → "Welcome to Testing Library"
  // => getByText normalizes before comparison
  expect(welcome).toBeInTheDocument();
 
  const status = screen.getByText("Status: ACTIVE");
  // => Exact match works for all-caps text
  // => No normalization for case (exact: true by default)
  expect(status).toBeInTheDocument();
 
  const totalLabel = screen.getByText((content, element) => {
    // => Function matcher: receives (text, element) arguments
    // => content: normalized text content of element
    // => element: DOM node being tested
    return (
      element?.tagName === "STRONG" &&
      // => Checks element type
      content === "Total:"
      // => Checks exact text content
    );
    // => Returns true to select this element, false to skip
  });
  // => Function matchers enable complex, conditional matching
  expect(totalLabel).toBeInTheDocument();
  // => Finds the <strong>Total:</strong> element specifically
});

import { render, screen } from "@testing-library/react";
 
function RegistrationForm() {
  // => Form demonstrating various label association techniques
  return (
    <form>
      <label htmlFor="username">Username</label>
      <input id="username" type="text" />
      {/* htmlFor/id pair: standard association */}
 
      <label>
        Email Address
        <input type="email" />
        {/* Wrapping label: implicit association */}
      </label>
 
      <input
        type="text"
        aria-label="Search query"
        // aria-label: programmatic label (no visible label element)
        placeholder="Search..."
      />
 
      <input
        type="text"
        aria-labelledby="bio-label"
        // aria-labelledby: references label by ID
      />
      <span id="bio-label">Biography</span>
      {/* span with id acts as label via aria-labelledby */}
    </form>
  );
}
 
test("getByLabelText with different label types", () => {
  render(<RegistrationForm />);
  // => Mounts form with 4 different label patterns
 
  const usernameInput = screen.getByLabelText("Username");
  // => Finds input associated with label "Username"
  // => Matches via htmlFor="username" → id="username"
  // => usernameInput: <input id="username" type="text">
  expect(usernameInput).toBeInTheDocument();
 
  const emailInput = screen.getByLabelText("Email Address");
  // => Finds input wrapped inside label element
  // => Implicit association (wrapping label)
  // => emailInput: <input type="email">
  expect(emailInput).toHaveAttribute("type", "email");
 
  const searchInput = screen.getByLabelText("Search query");
  // => Finds input with matching aria-label attribute
  // => Matches programmatic label
  expect(searchInput).toHaveAttribute("placeholder", "Search...");
 
  const bioInput = screen.getByLabelText("Biography");
  // => Finds input with aria-labelledby pointing to "bio-label" span
  // => Reads text of referenced element as accessible name
  expect(bioInput).toBeInTheDocument();
});

import { render, screen } from "@testing-library/react";
 
function SearchBar() {
  // => Search input that uses placeholder instead of label
  // => Note: placeholder-only inputs have accessibility limitations
  return (
    <div>
      <input
        type="search"
        placeholder="Search products..."
        aria-label="Product search"
        // aria-label provided even with placeholder for accessibility
      />
    </div>
  );
}
 
function ImageGallery() {
  // => Gallery with descriptive image alt text
  return (
    <div>
      <img src="/cat.jpg" alt="Orange tabby cat sleeping on a couch" />
      {/* Descriptive alt: describes image content for screen readers */}
      <img src="/logo.svg" alt="Company logo" />
      {/* Shorter alt for simpler images */}
      <img src="/decoration.svg" alt="" />
      {/* Empty alt: decorative image (screen readers skip it) */}
    </div>
  );
}
 
test("placeholder and alt text queries", () => {
  render(
    <div>
      <SearchBar />
      <ImageGallery />
    </div>
  );
  // => Renders both components
 
  const searchInput = screen.getByPlaceholderText("Search products...");
  // => getByPlaceholderText: finds by placeholder attribute value
  // => Use as fallback when getByLabelText isn't available
  // => searchInput: <input type="search" placeholder="Search products...">
  expect(searchInput).toBeInTheDocument();
 
  const catImage = screen.getByAltText("Orange tabby cat sleeping on a couch");
  // => getByAltText: finds <img> by alt attribute value
  // => Validates images have descriptive, accurate alt text
  // => catImage: <img src="/cat.jpg" alt="Orange tabby cat sleeping on a couch">
  expect(catImage).toBeInTheDocument();
  expect(catImage).toHaveAttribute("src", "/cat.jpg");
 
  const logoImage = screen.getByAltText("Company logo");
  // => Short alt text for logo images is acceptable
  expect(logoImage).toHaveAttribute("src", "/logo.svg");
 
  const decorativeImages = screen.queryAllByAltText("");
  // => queryAllByAltText: returns array of all empty-alt images
  // => Empty alt: decorative images intentionally have alt=""
  expect(decorativeImages).toHaveLength(1);
  // => Verifies exactly one decorative image
});

import { render, screen } from "@testing-library/react";
 
function ComplexWidget() {
  // => Widget where semantic queries might conflict
  return (
    <div>
      <section data-testid="primary-section">
        {/* data-testid: test-only attribute for targeted querying */}
        <p>Primary content</p>
        <button>Action</button>
      </section>
      <section data-testid="secondary-section">
        {/* Second section with same element types */}
        <p>Secondary content</p>
        <button>Action</button>
        {/* Same button text - would be ambiguous with getByRole */}
      </section>
    </div>
  );
}
 
test("getByTestId for disambiguation", () => {
  render(<ComplexWidget />);
  // => Two sections each with a "Action" button
 
  const primarySection = screen.getByTestId("primary-section");
  // => getByTestId: finds element by data-testid attribute
  // => Precise: targets exact element regardless of content
  // => primarySection: <section data-testid="primary-section">
 
  expect(primarySection).toContainElement(
    screen.getByText("Primary content")
  );
  // => toContainElement: asserts element is inside another element
  // => Verifies primary section contains correct content
 
  const secondarySection = screen.getByTestId("secondary-section");
  // => Finds second section by test ID
  expect(secondarySection).toBeInTheDocument();
 
  // Demonstrates why testId is a last resort:
  const buttons = screen.getAllByRole("button", { name: "Action" });
  // => getAllByRole: finds BOTH "Action" buttons
  // => Returns array: [primary Action, secondary Action]
  expect(buttons).toHaveLength(2);
  // => Verifies both buttons exist
  // => Cannot distinguish which is which without context
});

import { render, screen, within } from "@testing-library/react";
// => within: imported alongside render and screen
 
function ProductList() {
  // => List of products with identical structure
  const products = [
    { id: 1, name: "Widget A", price: "$10.00", available: true },
    { id: 2, name: "Widget B", price: "$20.00", available: false },
  ];
  // => Two products with same DOM structure
 
  return (
    <ul>
      {products.map((product) => (
        <li key={product.id} data-testid={`product-${product.id}`}>
          {/* data-testid on list item for within() scoping */}
          <h3>{product.name}</h3>
          <span>{product.price}</span>
          <button disabled={!product.available}>
            {product.available ? "Add to Cart" : "Out of Stock"}
          </button>
        </li>
      ))}
    </ul>
  );
}
 
test("within() scopes queries to container", () => {
  render(<ProductList />);
  // => Renders two product list items
 
  const productA = screen.getByTestId("product-1");
  // => Gets the container for Widget A
  // => productA: <li data-testid="product-1">...</li>
 
  const addButtonA = within(productA).getByRole("button");
  // => within(productA): scopes all queries to productA element
  // => .getByRole("button"): finds button INSIDE productA only
  // => addButtonA: <button>Add to Cart</button> for Widget A
  expect(addButtonA).toBeEnabled();
  // => Widget A is available, button is enabled
 
  const productB = screen.getByTestId("product-2");
  // => Gets the container for Widget B
 
  const outOfStockButton = within(productB).getByRole("button");
  // => Finds button scoped to Widget B
  // => outOfStockButton: <button disabled>Out of Stock</button>
  expect(outOfStockButton).toBeDisabled();
  // => Widget B is unavailable, button is disabled
 
  within(productA).getByText("$10.00");
  // => Finds price text scoped to Widget A
  // => Prevents accidental match with Widget B's price
  within(productB).getByText("$20.00");
  // => Finds price text scoped to Widget B
});

import { render, screen } from "@testing-library/react";
 
function ConditionalContent({ showMessage }: { showMessage: boolean }) {
  // => Conditionally rendered content
  return (
    <div>
      <h1>Main Content</h1>
      {showMessage && <p>Optional message</p>}
      {/* Conditional: only renders when showMessage is true */}
    </div>
  );
}
 
test("query variant comparison", () => {
  render(<ConditionalContent showMessage={false} />);
  // => Renders without optional message
 
  const heading = screen.getByText("Main Content");
  // => getByText: throws if not found
  // => Use when element MUST be present (assertion by query)
  // => heading: <h1>Main Content</h1>
  expect(heading).toBeInTheDocument();
 
  const message = screen.queryByText("Optional message");
  // => queryByText: returns null if not found (no throw)
  // => Use when testing absence of elements
  // => message: null (element not rendered)
  expect(message).not.toBeInTheDocument();
  // => not.toBeInTheDocument(): accepts null without error
 
  // findBy* is for async elements - covered in intermediate section
  // Usage: const element = await screen.findByText("Loaded content");
  // Waits up to 1000ms (default) for element to appear
});

import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { useState } from "react";
 
function ToggleButton() {
  // => Button that toggles between two states
  const [on, setOn] = useState(false);
  // => on: tracks toggle state
  return (
    <button
      onClick={() => setOn(!on)}
      // => onClick: toggles state on each click
      aria-pressed={on}
      // => aria-pressed: communicates toggle state to screen readers
    >
      {on ? "ON" : "OFF"}
      {/* Text reflects current state */}
    </button>
  );
}
 
test("userEvent click interactions", async () => {
  // => async: required for userEvent interactions
  const user = userEvent.setup();
  // => Creates userEvent instance with shared pointer/keyboard state
  // => Must be created before render for consistent behavior
  // => user: object with interaction methods
 
  render(<ToggleButton />);
  // => Mounts ToggleButton in initial "off" state
 
  const button = screen.getByRole("button");
  // => Finds toggle button by role
  // => Initial: <button aria-pressed="false">OFF</button>
 
  expect(button).toHaveTextContent("OFF");
  // => Verifies initial state is OFF
  expect(button).toHaveAttribute("aria-pressed", "false");
  // => Verifies aria-pressed reflects off state
 
  await user.click(button);
  // => Simulates full click sequence:
  // => pointerover, pointerenter, mouseover, mouseenter
  // => pointerdown, mousedown, pointerup, mouseup, click
  // => React's onClick handler fires, state updates to true
 
  expect(button).toHaveTextContent("ON");
  // => Verifies button text changed after click
  expect(button).toHaveAttribute("aria-pressed", "true");
  // => Verifies aria-pressed updated for screen readers
 
  await user.click(button);
  // => Second click toggles back to off
  expect(button).toHaveTextContent("OFF");
  // => State cycled back to initial
});

import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { useState } from "react";
 
function SearchInput() {
  // => Controlled input with live character count
  const [value, setValue] = useState("");
  // => value: controlled input state
 
  return (
    <div>
      <label htmlFor="search">Search</label>
      <input
        id="search"
        type="text"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        // => Controlled input: value driven by state
      />
      <span>{value.length} characters</span>
      {/* Live character count updates as user types */}
    </div>
  );
}
 
test("userEvent.type() simulates keyboard input", async () => {
  const user = userEvent.setup();
  // => Creates user instance
 
  render(<SearchInput />);
  // => Mounts with empty input
 
  const input = screen.getByLabelText("Search");
  // => Finds input by associated label
  // => Initial: <input value="">
 
  await user.type(input, "hello");
  // => Types each character: h, e, l, l, o
  // => For each character: keydown, keypress, input, keyup events
  // => React onChange fires for each input event
  // => After typing: input.value = "hello"
 
  expect(input).toHaveValue("hello");
  // => toHaveValue: checks input's current value
  // => Passes: value is "hello"
 
  expect(screen.getByText("5 characters")).toBeInTheDocument();
  // => Verifies character count updated correctly
  // => React re-rendered with new value length
 
  await user.clear(input);
  // => Clears input value (selects all and deletes)
  // => After clear: input.value = ""
 
  expect(input).toHaveValue("");
  // => Verifies input was cleared
  // => Character count should reset to 0
  expect(screen.getByText("0 characters")).toBeInTheDocument();
});

import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { useState } from "react";
 
function KeyboardDemo() {
  // => Component that responds to keyboard events
  const [lastKey, setLastKey] = useState("none");
  const [inputValue, setInputValue] = useState("");
 
  return (
    <div>
      <p>Last key: {lastKey}</p>
      <input
        type="text"
        aria-label="Text input"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        onKeyDown={(e) => setLastKey(e.key)}
        // => onKeyDown: captures key name for display
      />
      <button>Submit</button>
    </div>
  );
}
 
test("keyboard() special keys and combinations", async () => {
  const user = userEvent.setup();
  render(<KeyboardDemo />);
 
  const input = screen.getByLabelText("Text input");
  await user.click(input);
  // => Focus the input before keyboard interactions
  // => Required for keyboard events to reach the input
 
  await user.type(input, "hello world");
  // => Types full text into input
  // => input.value = "hello world"
 
  await user.keyboard("{End}");
  // => Presses End key: moves cursor to end of input
  // => {End}: Testing Library's key name syntax
 
  await user.keyboard("{Shift>}[Home]{/Shift}");
  // => {Shift>}: holds Shift key down
  // => [Home]: presses Home key while Shift held
  // => {/Shift}: releases Shift key
  // => Effect: selects all text from end to beginning
 
  await user.keyboard("{Backspace}");
  // => Presses Backspace: deletes selected text
  // => After: input.value = "" (all text was selected)
 
  expect(input).toHaveValue("");
  // => All text deleted by Shift+Home+Backspace sequence
 
  await user.keyboard("{Tab}");
  // => Presses Tab: moves focus to next focusable element
  // => Focus moves from input to Submit button
 
  expect(screen.getByRole("button", { name: "Submit" })).toHaveFocus();
  // => toHaveFocus(): asserts element has keyboard focus
  // => Tab moved focus to Submit button
});

import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { useState } from "react";
 
function PreferencesForm() {
  // => Form with select dropdown and radio buttons
  const [color, setColor] = useState("blue");
  const [size, setSize] = useState("medium");
 
  return (
    <form>
      <label htmlFor="color-select">Favorite Color</label>
      <select
        id="color-select"
        value={color}
        onChange={(e) => setColor(e.target.value)}
      >
        <option value="blue">Blue</option>
        <option value="green">Green</option>
        <option value="red">Red</option>
      </select>
 
      <fieldset>
        <legend>Size</legend>
        {/* fieldset + legend: groups related inputs with accessible name */}
        {["small", "medium", "large"].map((s) => (
          <label key={s}>
            <input
              type="radio"
              name="size"
              value={s}
              checked={size === s}
              onChange={() => setSize(s)}
            />
            {s.charAt(0).toUpperCase() + s.slice(1)}
          </label>
        ))}
      </fieldset>
 
      <p>Color: {color}, Size: {size}</p>
    </form>
  );
}
 
test("select and radio interactions", async () => {
  const user = userEvent.setup();
  render(<PreferencesForm />);
 
  const colorSelect = screen.getByLabelText("Favorite Color");
  // => Finds select by label
  // => Initial value: "blue"
 
  await user.selectOptions(colorSelect, "green");
  // => selectOptions: selects option by value, label, or element
  // => Fires change event on select element
  // => After: colorSelect.value = "green"
  expect(colorSelect).toHaveValue("green");
  // => toHaveValue on select: checks selected option value
 
  const mediumRadio = screen.getByRole("radio", { name: "Medium" });
  // => Finds radio button by role and accessible name
  // => Name comes from label text
  expect(mediumRadio).toBeChecked();
  // => Initial state: medium is selected
 
  const largeRadio = screen.getByRole("radio", { name: "Large" });
  await user.click(largeRadio);
  // => Clicks radio button to select it
  // => Deselects medium, selects large
 
  expect(largeRadio).toBeChecked();
  // => Large is now selected
  expect(mediumRadio).not.toBeChecked();
  // => Medium deselected when large selected
 
  expect(screen.getByText("Color: green, Size: large")).toBeInTheDocument();
  // => Verifies both selections reflected in displayed state
});

import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { useState } from "react";
 
function TooltipButton() {
  // => Button with hover-activated tooltip
  const [showTooltip, setShowTooltip] = useState(false);
 
  return (
    <div>
      <button
        onMouseEnter={() => setShowTooltip(true)}
        // => Shows tooltip when mouse enters
        onMouseLeave={() => setShowTooltip(false)}
        // => Hides tooltip when mouse leaves
        onFocus={() => setShowTooltip(true)}
        // => Also shows on keyboard focus (accessibility requirement)
        onBlur={() => setShowTooltip(false)}
        // => Hides on blur
      >
        Hover me
      </button>
      {showTooltip && (
        <div role="tooltip">
          {/* role="tooltip": semantic tooltip role */}
          Extra information about this action
        </div>
      )}
    </div>
  );
}
 
test("hover and focus interactions", async () => {
  const user = userEvent.setup();
  render(<TooltipButton />);
 
  const button = screen.getByRole("button", { name: "Hover me" });
 
  expect(screen.queryByRole("tooltip")).not.toBeInTheDocument();
  // => Tooltip not visible before interaction
 
  await user.hover(button);
  // => Moves pointer over button
  // => Fires: pointerover, pointerenter, mouseover, mouseenter
  // => React's onMouseEnter fires, showTooltip becomes true
  expect(screen.getByRole("tooltip")).toBeInTheDocument();
  // => Tooltip appeared after hover
 
  await user.unhover(button);
  // => Moves pointer away from button
  // => Fires: pointerout, pointerleave, mouseout, mouseleave
  // => React's onMouseLeave fires, showTooltip becomes false
  expect(screen.queryByRole("tooltip")).not.toBeInTheDocument();
  // => Tooltip hidden after unhover
 
  await user.tab();
  // => Presses Tab: moves focus to the button (first focusable element)
  // => onFocus fires, showTooltip becomes true
  expect(screen.getByRole("tooltip")).toBeInTheDocument();
  // => Tooltip also appears on keyboard focus (accessibility feature)
 
  expect(button).toHaveFocus();
  // => Verifies button received keyboard focus
});

import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { useState } from "react";
 
function ContactForm() {
  // => Simple contact form with submission handling
  const [submitted, setSubmitted] = useState(false);
  const [formData, setFormData] = useState({ name: "", email: "" });
 
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // => Prevents default browser form submission
    // => Allows JavaScript to handle submission
    setSubmitted(true);
    // => Updates state to show confirmation
  };
 
  if (submitted) {
    return <p>Thank you, {formData.name}! We&apos;ll contact {formData.email}.</p>;
    // => Confirmation message shown after submission
  }
 
  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="name">Full Name</label>
      <input
        id="name"
        type="text"
        value={formData.name}
        onChange={(e) => setFormData({ ...formData, name: e.target.value })}
      />
      <label htmlFor="email">Email</label>
      <input
        id="email"
        type="email"
        value={formData.email}
        onChange={(e) => setFormData({ ...formData, email: e.target.value })}
      />
      <button type="submit">Send Message</button>
    </form>
  );
}
 
test("complete form submission workflow", async () => {
  const user = userEvent.setup();
  render(<ContactForm />);
 
  await user.type(screen.getByLabelText("Full Name"), "Alice Smith");
  // => Types name into Full Name input
  // => input.value = "Alice Smith"
 
  await user.type(screen.getByLabelText("Email"), "alice@example.com");
  // => Types email into Email input
  // => input.value = "alice@example.com"
 
  await user.click(screen.getByRole("button", { name: "Send Message" }));
  // => Clicks submit button
  // => Fires click event, form onSubmit fires
  // => e.preventDefault() prevents page reload
  // => setSubmitted(true) triggers re-render
 
  expect(
    screen.getByText("Thank you, Alice Smith! We'll contact alice@example.com.")
  ).toBeInTheDocument();
  // => Verifies confirmation message rendered with correct data
  // => Form submission workflow completed successfully
 
  expect(screen.queryByRole("button", { name: "Send Message" })).not.toBeInTheDocument();
  // => Form replaced by confirmation message
  // => Submit button no longer in DOM
});

import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { useState } from "react";
 
function ValidatedInput() {
  // => Input with client-side validation
  const [value, setValue] = useState("");
  const [error, setError] = useState("");
 
  const validate = (val: string) => {
    // => Validation function: returns error message or empty string
    if (val.length < 3) return "Must be at least 3 characters";
    if (val.length > 20) return "Must be no more than 20 characters";
    if (!/^[a-zA-Z]+$/.test(val)) return "Letters only";
    return "";
    // => Empty string means valid
  };
 
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newValue = e.target.value;
    setValue(newValue);
    setError(validate(newValue));
    // => Validates on every keystroke
  };
 
  return (
    <div>
      <label htmlFor="username">Username</label>
      <input
        id="username"
        type="text"
        value={value}
        onChange={handleChange}
        aria-describedby={error ? "username-error" : undefined}
        // => aria-describedby: links input to error message
        // => Undefined when no error (removes attribute)
        aria-invalid={error ? "true" : "false"}
        // => aria-invalid: signals validation state to screen readers
      />
      {error && (
        <span id="username-error" role="alert">
          {/* role="alert": live region announces error to screen readers */}
          {error}
        </span>
      )}
    </div>
  );
}
 
test("input validation shows and hides errors", async () => {
  const user = userEvent.setup();
  render(<ValidatedInput />);
 
  const input = screen.getByLabelText("Username");
 
  await user.type(input, "ab");
  // => Types 2 characters - below 3 character minimum
  // => validate("ab") returns "Must be at least 3 characters"
  expect(screen.getByRole("alert")).toHaveTextContent(
    "Must be at least 3 characters"
  );
  // => Error message appeared
  expect(input).toHaveAttribute("aria-invalid", "true");
  // => aria-invalid="true" signals invalid state
 
  await user.clear(input);
  // => Clears input
  await user.type(input, "alice");
  // => Types valid username (5 letters)
  // => validate("alice") returns ""
  expect(screen.queryByRole("alert")).not.toBeInTheDocument();
  // => Error message gone when input is valid
  expect(input).toHaveAttribute("aria-invalid", "false");
  // => aria-invalid="false" signals valid state
 
  await user.type(input, "123");
  // => Types numbers into letters-only field
  // => validate("alice123") returns "Letters only"
  expect(screen.getByRole("alert")).toHaveTextContent("Letters only");
  // => Correct validation error for non-letter characters
});

import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { useState } from "react";
 
const options = ["Email", "SMS", "Push Notifications"];
// => Available notification preferences
 
function NotificationPreferences() {
  // => Multi-checkbox preference form
  const [selected, setSelected] = useState<string[]>([]);
  // => selected: array of chosen notification methods
 
  const toggle = (option: string) => {
    // => Adds or removes option from selected array
    setSelected((prev) =>
      prev.includes(option)
        ? prev.filter((o) => o !== option)
        // => Remove if already selected
        : [...prev, option]
        // => Add if not selected
    );
  };
 
  return (
    <fieldset>
      <legend>Notification Preferences</legend>
      {options.map((option) => (
        <label key={option}>
          <input
            type="checkbox"
            checked={selected.includes(option)}
            onChange={() => toggle(option)}
          />
          {option}
        </label>
      ))}
      <p>Selected: {selected.join(", ") || "none"}</p>
    </fieldset>
  );
}
 
test("checkbox multi-selection", async () => {
  const user = userEvent.setup();
  render(<NotificationPreferences />);
 
  const emailCheckbox = screen.getByRole("checkbox", { name: "Email" });
  const smsCheckbox = screen.getByRole("checkbox", { name: "SMS" });
  // => Find checkboxes by role and accessible name (label text)
 
  expect(emailCheckbox).not.toBeChecked();
  expect(smsCheckbox).not.toBeChecked();
  // => All unchecked initially
 
  await user.click(emailCheckbox);
  // => Click selects Email
  expect(emailCheckbox).toBeChecked();
  // => Email now checked
  expect(screen.getByText("Selected: Email")).toBeInTheDocument();
  // => Selected array shows "Email"
 
  await user.click(smsCheckbox);
  // => Click selects SMS as well
  expect(smsCheckbox).toBeChecked();
  // => Both Email and SMS now checked
  expect(screen.getByText("Selected: Email, SMS")).toBeInTheDocument();
  // => Both selections displayed
 
  await user.click(emailCheckbox);
  // => Click unchecks Email
  expect(emailCheckbox).not.toBeChecked();
  // => Email deselected
  expect(screen.getByText("Selected: SMS")).toBeInTheDocument();
  // => Only SMS remains selected
});

import { render, screen } from "@testing-library/react";
 
function ConditionalUI() {
  // => Component with three different "hidden" patterns
  return (
    <div>
      <p>Always visible</p>
 
      <p style={{ display: "none" }}>Display none (hidden)</p>
      {/* display:none - not visible, not in layout */}
 
      <p style={{ visibility: "hidden" }}>Visibility hidden</p>
      {/* visibility:hidden - invisible but takes space */}
 
      <p hidden>HTML hidden attribute</p>
      {/* hidden attr - equivalent to display:none */}
 
      <p style={{ opacity: 0 }}>Opacity zero</p>
      {/* opacity:0 - invisible but interactable */}
    </div>
  );
}
 
test("visibility vs presence assertions", () => {
  render(<ConditionalUI />);
 
  expect(screen.getByText("Always visible")).toBeVisible();
  // => toBeVisible(): checks computed visibility
  // => Element has no hiding styles in ancestor chain
  // => Passes: element is fully visible
 
  expect(screen.getByText("Display none (hidden)")).not.toBeVisible();
  // => Element is in DOM but not visible
  // => display:none makes element not visible
  // => toBeInTheDocument() would pass, toBeVisible() fails
 
  expect(screen.getByText("Visibility hidden")).not.toBeVisible();
  // => visibility:hidden also makes element not visible
  // => Element still occupies space in layout
 
  expect(screen.getByText("HTML hidden attribute")).not.toBeVisible();
  // => HTML hidden attribute equivalent to display:none
 
  expect(screen.getByText("Opacity zero")).toBeVisible();
  // => opacity:0 is visible by toBeVisible() standards
  // => Element is in layout, just transparent
  // => Interaction can still occur (e.g., click events fire)
});

import { render, screen } from "@testing-library/react";
 
function InputShowcase() {
  // => Various input types to demonstrate value assertions
  return (
    <form>
      <input
        type="text"
        aria-label="Name"
        defaultValue="Alice"
        className="form-input required"
        data-priority="high"
      />
      {/* text input with default value, class, and data attribute */}
 
      <input
        type="checkbox"
        aria-label="Newsletter"
        defaultChecked={true}
      />
      {/* Checked checkbox */}
 
      <select aria-label="Country" defaultValue="us">
        <option value="us">United States</option>
        <option value="uk">United Kingdom</option>
      </select>
      {/* Select with default selection */}
 
      <input type="range" aria-label="Volume" min="0" max="100" defaultValue="75" />
      {/* Range input */}
    </form>
  );
}
 
test("value and attribute assertions", () => {
  render(<InputShowcase />);
 
  const nameInput = screen.getByLabelText("Name");
  expect(nameInput).toHaveValue("Alice");
  // => toHaveValue: checks text input's value property
  // => More readable than: expect(nameInput.value).toBe("Alice")
 
  expect(nameInput).toHaveClass("form-input");
  // => toHaveClass: checks element has specified CSS class
  // => nameInput has both "form-input" and "required" classes
  // => Partial match: passes even with additional classes
 
  expect(nameInput).toHaveClass("form-input", "required");
  // => Can check multiple classes in single assertion
 
  expect(nameInput).toHaveAttribute("data-priority", "high");
  // => toHaveAttribute: checks attribute name and value
  // => Verifies custom data attribute
 
  const checkbox = screen.getByLabelText("Newsletter");
  expect(checkbox).toBeChecked();
  // => toBeChecked: asserts checkbox/radio is checked
  // => Reads checked property, not attribute
 
  const select = screen.getByLabelText("Country");
  expect(select).toHaveValue("us");
  // => toHaveValue on select: checks selected option's value
  // => Returns value attribute of selected option
 
  const range = screen.getByLabelText("Volume");
  expect(range).toHaveValue("75");
  // => toHaveValue on range: checks numeric value as string
});

import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
 
function AccessibleForm() {
  // => Form demonstrating interactive state assertions
  return (
    <form>
      <label htmlFor="required-field">Name (required)</label>
      <input
        id="required-field"
        type="text"
        required
        // => required: HTML validation attribute
        aria-required="true"
        // => aria-required: redundant but explicit for screen readers
      />
 
      <label htmlFor="optional-field">Nickname (optional)</label>
      <input id="optional-field" type="text" />
      {/* No required attribute */}
 
      <button type="submit">Submit</button>
      <button type="button" disabled>
        Disabled Action
      </button>
      {/* disabled: prevents interaction */}
    </form>
  );
}
 
test("focus, required, and disabled assertions", async () => {
  const user = userEvent.setup();
  render(<AccessibleForm />);
 
  const requiredInput = screen.getByLabelText("Name (required)");
  const optionalInput = screen.getByLabelText("Nickname (optional)");
  const submitButton = screen.getByRole("button", { name: "Submit" });
  const disabledButton = screen.getByRole("button", { name: "Disabled Action" });
 
  expect(requiredInput).toBeRequired();
  // => toBeRequired(): checks required attribute OR aria-required="true"
  // => Passes: input has required attribute
 
  expect(optionalInput).not.toBeRequired();
  // => Optional input has no required attribute
  // => Verifies field is truly optional
 
  expect(submitButton).toBeEnabled();
  // => toBeEnabled(): asserts element is interactive
  // => No disabled attribute on submit button
 
  expect(disabledButton).toBeDisabled();
  // => toBeDisabled(): checks disabled attribute
  // => Also works with aria-disabled="true"
 
  await user.tab();
  // => Tab to first focusable element (required input)
  // => Focus moves from body to first input
 
  expect(requiredInput).toHaveFocus();
  // => toHaveFocus(): asserts element has keyboard focus
  // => document.activeElement === requiredInput
 
  await user.tab();
  // => Tab to next focusable element
  expect(optionalInput).toHaveFocus();
  // => Focus moved to optional input
 
  await user.tab();
  // => Tab to submit button (disabled button is skipped)
  expect(submitButton).toHaveFocus();
  // => Disabled elements are removed from tab order
  // => Verifies disabled button is correctly non-focusable
});