Vitest Browser Mode Guide

Summary

Last updated: Dec 2025 - updated with improvements thanks to Vladimir (@erus.dev on bsky) One of the most exciting developments in the last few years when it comes to testing is definitely Vitest Browser Mode . In this article I am going to tell you everything you need to know. And this is such a big change in the JS testing ecosystem - I believe that within a year or two, all frontend engineers will need to know what Vitest Browser Mode is just like we all have to at least be aware of Jest/Vitest test runners, Cypress/Playwright E2E tests etc. What are Jest, Vitest, Playwright or Cypress? (Show details)Good questions! Jest and Vitest are test runners. They are very similar. This is where you run your expect(val).toBe(expectedVal) sort of tests. When testing React components in these, they run in your terminal with a fake simulated DOM. Note: Vitest comes from the team that released Vite which is a tool for building frontend JS apps. Playwright/Cypress are end to end (E2E) frameworks, which runs in headless mode in real browsers (Chrome etc) This blog post is about Vitest Browser Mode - it is a special way of running tests within Vitest.If you are very new to all of this, check out my completely free 19 lessons on Vitest fundamentals Vitest Browser Mode combines several powerful features: Real browser testing... runs tests in Chrome, Firefox, and other real browsers, similar to E2E frameworks like Playwright Component isolation... test single components at a time, just like normal Vitest/Jest tests Visual preview... easily see the rendered components that you are testing Fast execution... despite running in a real browser, which at first might seem like it would be slow - it is actually really fast. Built-in Visual Regression screenshots... take screenshots of your components and check that they are rendering the same in future test runs This is different to running E2E (End to end) tests directly in Playwright. With Vitest browser mode we are still testing individu...