Component Testing

Vitest Browser Mode with Playwright. Tests run in real Chromium — every DOM API, CSS layout, and browser behavior is authentic.

Conventions

• Co-locate tests: foo.browser.test.tsx next to foo.tsx
• Always wrap in describe named after the component
• Use test, not it
• render() is async — always await it
• Test behavior through rendered output, not implementation details
• Do NOT test shadcn/ui primitives — only test your own components that compose them

describe("SearchFilter", () => {
  test("filters results on input change", async () => { ... });
  test("shows empty state when no matches", async () => { ... });
});