Testing, Debugging, dan Kualitas Kode · 3/7

Menguji component React

Cari berdasarkan role dan label, bukan nama class. Uji perilaku, bukan implementasi.

Baca 30 menit

Setelah pelajaran ini kamu bisa

Mencari elemen dengan cara pengguna menemukannya
Menguji perilaku alih-alih implementasi
Menjelaskan kenapa `getByRole` adalah query yang diutamakan
Menyebutkan apa yang tidak bisa diuji sebagai unit test di React

Aturan untuk test component, dari prinsip panduan Testing Library sendiri: temukan sesuatu dengan cara pengguna menemukannya. Pengguna tidak tahu nama class-mu. Mereka melihat sebuah button berlabel "Sign in".

tsx

import { render, screen } from "@testing-library/react";
import { expect, it } from "vitest";
import { Badge } from "./badge";

it("shows its label", () => {
  render(<Badge tone="success">Paid</Badge>);
  expect(screen.getByText("Paid")).toBeInTheDocument();
});

it("announces an icon-only button", () => {
  render(<CloseButton />);
  // The accessible name, not the markup.
  expect(screen.getByRole("button", { name: "Close dialog" })).toBeInTheDocument();
});

Query	Dipakai saat	Prioritas
`getByRole(role, { name })`	Hampir selalu — button, link, heading, input	Pilihan pertama
`getByLabelText`	Field form yang punya label	Bagus
`getByText`	Teks non-interaktif	Boleh
`getByTestId`	Tidak ada cara lain yang berhasil	Pilihan terakhir
`container.querySelector`	Jangan pernah, di dalam test	Hindari

Coba sendiri

Query berdasarkan accessible name, diimplementasikan di atas pohon elemen tiruan. Perhatikan elemen mana yang bisa dan tidak bisa ditemukannya.

// A rendered tree. `role` is implicit for real elements.
const tree = [
  { tag: "button", text: "Sign in" },
  { tag: "button", text: "", ariaLabel: "Close dialog" },
  { tag: "button", text: "" },                                  // no name at all
  { tag: "div", text: "Delete", onClick: true },                 // looks like a button
  { tag: "a", href: "/venues", text: "Venues" },
  { tag: "input", type: "text", id: "guests" },
  { tag: "label", htmlFor: "guests", text: "Number of guests" },
  { tag: "h1", text: "Villa Sunset" },
];

// Implicit roles, as the accessibility tree assigns them.
const IMPLICIT_ROLE = { button: "button", a: "link", input: "textbox", h1: "heading" };

function roleOf(el) {
  if (el.tag === "a" && !el.href) return null;      // a link needs an href
  return IMPLICIT_ROLE[el.tag] ?? null;             // a div has no role
}

// The accessible name: aria-label, else a matching label, else the text.
function accessibleName(el, all) {
  if (el.ariaLabel) return el.ariaLabel;
  const label = all.find((n) => n.tag === "label" && n.htmlFor === el.id);
  if (label) return label.text;
  return el.text || "";
}

console.log('getByRole("button", "Sign in")      ', getByRole(tree, "button", "Sign in"));
console.log('getByRole("button", "Close dialog") ', getByRole(tree, "button", "Close dialog"));
console.log('getByRole("link", "Venues")         ', getByRole(tree, "link", "Venues"));
console.log('getByRole("textbox", "Number of guests")', getByRole(tree, "textbox", "Number of guests"));
console.log('getByRole("heading", "Villa Sunset")', getByRole(tree, "heading", "Villa Sunset"));
console.log("");
console.log('getByRole("button", "Delete")       ', getByRole(tree, "button", "Delete"));
console.log("   ^ the clickable <div> has no role, so the test cannot find it.");
console.log("     Accessibility failure and test failure are the same failure.");
console.log("");
console.log('getByRole("button")                 ', getByRole(tree, "button"));
console.log("   ^ three buttons match, so the query is ambiguous - name them.");

Hasil

Tekan Jalankan untuk melihat hasilnya.

Ini jalan di browser kamu, di dalam sandbox. Apa pun yang kamu tulis di sini tidak bisa merusak situs.

Perilaku, bukan implementasi

tsx

// ❌ Coupled to how it works. Renaming state breaks a passing test.
it("sets isOpen to true", () => {
  const { result } = renderHook(() => useDisclosure());
  act(() => result.current.open());
  expect(result.current.isOpen).toBe(true);
});

// ✅ Coupled to what the user sees. Survives any refactor that keeps behaviour.
it("shows the menu after clicking the trigger", async () => {
  render(<NavMenu />);
  expect(screen.queryByRole("menu")).not.toBeInTheDocument();

  await userEvent.click(screen.getByRole("button", { name: "Open menu" }));

  expect(screen.getByRole("menu")).toBeInTheDocument();
});

Test kedua akan tetap lolos meski component-nya ditulis ulang dari useState jadi useReducer, atau library menu-nya diganti sepenuhnya. Itulah intinya.

Tugas praktik

Tulis test untuk component Callout di proyek ini: render satu dengan sebuah judul dan children, lalu pastikan judulnya ada dan children-nya ter-render. Pakai getByRole di mana bisa. Lalu ubah <aside>-nya jadi <div> di component-nya dan lihat apakah test-mu menyadarinya — kalau tidak, query-mu terlalu longgar.

Hasil yang diharapkan

Sebuah test yang lolos, dan yang gagal saat elemen landmark-nya berubah.