Test-Driven React, 2nd Edition

How to Read the Code Examples

This book takes a hands-on, project-driven approach, which means that source files often change over the course of a chapter. When a code example is a work in progress, its file name (relative to the project root) is shown as a comment at the top of the snippet:

// src/MyComponent.test.tsx
import { render, screen } from "@testing-library/react";
import MyComponent from "./MyComponent";

describe("MyComponent", () => {
  it("renders a <div>", () => {
    render(<MyComponent />);
    expect(screen.getByRole("div")).toBeInTheDocument();
  });
});

As a source file changes over the course of a chapter, familiar sections are omitted with ... and new/edited lines are highlighted:

// src/MyComponent.test.tsx ...