Drills: Testing Frontend & E2E

import { render, screen } from "@testing-library/react"
import { Header } from "./Header"

it("renders the title and send button", () => {
  render(<Header />)
  expect(
    screen.getByRole("heading", { name: "DocChat" })
  ).toBeInTheDocument()
  expect(
    screen.getByRole("button", { name: "Send" })
  ).toBeInTheDocument()
})

import { render, screen } from "@testing-library/react"
import userEvent from "@testing-library/user-event"
import { Counter } from "./Counter"

it("increments on click", async () => {
  const user = userEvent.setup()
  render(<Counter />)
  await user.click(screen.getByRole("button", { name: "Increment" }))
  expect(screen.getByText("Count: 1")).toBeInTheDocument()
})

Always await userEvent and call userEvent.setup() once at the top — it's async because it mimics the full event sequence a real user fires.

import { render, screen } from "@testing-library/react"
import userEvent from "@testing-library/user-event"
import { AskForm } from "./AskForm"

it("accepts typed input", async () => {
  const user = userEvent.setup()
  render(<AskForm />)
  const input = screen.getByLabelText("Ask a question")
  await user.type(input, "refund policy?")
  expect(input).toHaveValue("refund policy?")
})

import { render, screen } from "@testing-library/react"
import { Loader } from "./Loader"

it("shows Done after loading", async () => {
  render(<Loader />)
  // present immediately
  expect(screen.getByText("Loading…")).toBeInTheDocument()
  // appears later — findBy polls until it exists
  expect(await screen.findByText("Done")).toBeInTheDocument()
})

Use getBy* for things present now, findBy* for things that appear later, and queryBy* when you need to assert something is absent.

import { http, HttpResponse } from "msw"

// default handler (in handlers.ts)
export const handlers = [
  http.get("/api/documents", () =>
    HttpResponse.json([
      { id: "1", name: "policy.pdf" },
      { id: "2", name: "report.pdf" },
    ])
  ),
]

// per-test override (inside an it block)
server.use(
  http.get("/api/documents", () => new HttpResponse(null, { status: 500 }))
)

In v2 it's http.get / http.post (not the old rest.*), and you return an HttpResponse. server.use() overrides for the current test; afterEach(() => server.resetHandlers()) wipes it.

import { test, expect } from "@playwright/test"

test("asking shows an answer", async ({ page }) => {
  await page.goto("/")
  await page.getByRole("textbox", { name: "Ask a question" })
    .fill("What is the refund policy?")
  await page.getByRole("button", { name: "Send" }).click()
  await expect(page.getByText(/refund/i)).toBeVisible()
})

The await expect(locator).toBeVisible() assertion retries on its own until the element shows up — no manual sleeps. Note Playwright reuses the same accessible getByRole locators you learned in RTL.

import { render, screen } from "@testing-library/react"
import { http, HttpResponse, delay } from "msw"
import { server } from "./test/setup"
import { DocumentList } from "./DocumentList"

it("shows a loading state first", () => {
  server.use(
    http.get("/api/documents", async () => {
      await delay()          // keep the request pending
      return HttpResponse.json([])
    })
  )
  render(<DocumentList />)
  expect(screen.getByText("Loading documents…")).toBeInTheDocument()
})

it("renders the loaded documents", async () => {
  server.use(
    http.get("/api/documents", () =>
      HttpResponse.json([
        { id: "1", name: "policy.pdf" },
        { id: "2", name: "report.pdf" },
      ])
    )
  )
  render(<DocumentList />)
  // findBy waits for the fetch to resolve and the list to render
  expect(await screen.findByText("policy.pdf")).toBeInTheDocument()
  expect(screen.getByText("report.pdf")).toBeInTheDocument()
  // loading text is gone
  expect(screen.queryByText("Loading documents…")).not.toBeInTheDocument()
})

it("shows an empty state when there are none", async () => {
  server.use(
    http.get("/api/documents", () => HttpResponse.json([]))
  )
  render(<DocumentList />)
  expect(await screen.findByText("No documents yet.")).toBeInTheDocument()
})

Three handlers, three states, zero real network. Notice the pattern: getBy* for what's present immediately, findBy* for what arrives after the fetch, queryBy* + not.toBeInTheDocument() to prove the loading text disappeared. Add a fourth test that overrides the handler to return a 500 and asserts an error message — same shape.