How do you test DOM behaviour in Jest?

A DOM test should look like a user interaction. The arrangement is the rendered markup, the action is a click, typing or submit, and the assertion is the resulting visible state. Querying by role and accessible name keeps the test resilient to markup refactors.

import { screen } from "@testing-library/dom";
import userEvent from "@testing-library/user-event";

test("toggles the panel", async () => {
  const user = userEvent.setup();
  document.body.innerHTML =
    '<button aria-expanded="false">Details</button><div hidden>More</div>';

  const button = screen.getByRole("button", { name: "Details" });
  await user.click(button);

  expect(button).toHaveAttribute("aria-expanded", "true");
});

Query and interaction rules

• Prefer getByRole, getByLabelText and getByText over CSS selectors
• Use userEvent for clicks and typing because it models real event sequences
• Use findBy and waitFor for updates that happen after an event loop turn
• Assert on attributes, text and visibility that a user can perceive
• Avoid reading component state or calling internal methods

Use getBy when the element must already exist, queryBy to assert absence, and findBy when it appears asynchronously. The distinction matters because getBy throws on a missing element, which produces a clearer failure than a null check.