Vitest's browser mode enables component testing in real browsers without needing Playwright or Cypress as a separate test runner. The guide covers setup from scratch, writing component tests using `@vitest/browser/react` and `expect.element()`, simulating user interactions with `userEvent` from `@vitest/browser/context`, and testing CSS/computed styles that jsdom cannot handle. It also covers advanced patterns like API mocking with `vi.mock()` or MSW, running browser and Node tests in the same workspace, and a step-by-step migration checklist from Playwright Component Testing. A performance comparison table highlights Vitest's advantages in watch mode speed and setup simplicity, while noting current limitations around multi-browser parallelism and CSS-in-JS compatibility.
Table of contents
Table of ContentsWhy Component Testing Needs Real BrowsersWhat Changed in Vitest Browser ModeSetting Up Vitest Browser Mode from ScratchWriting Your First Browser-Mode Component TestAdvanced Patterns and Real-World ScenariosMigration Checklist: From Playwright Component Testing to Vitest Browser ModePerformance Comparison: Vitest Browser Mode vs. Playwright Component TestingGotchas and Current LimitationsWhen to Adopt Vitest Browser ModeSort: