Vitest Browser Mode

Browser Mode is a recent addition to Vitest that allows you to run your tests in the actual browser. With browser-like environment issues becoming more and more problematic, a lot of testing frameworks have invested into designing a component-level testing model:

Browser Mode is Vitest's answer to this problem.

How it works

Naturally, if you want to run tests in the browser you need a browser. What the Vitest team decided to do is embrace existing browser automation tools like Playwright and WebdriverIO, and implement a provider layer on top of them. This means you can now repurpose the same tooling you would use for, say, end-to-end test for integration testing.

The next thing to solve was the test process itself. Different tools run your tests differently. For example, in Playwright your tests are written in Node.js and use the page object to interact with the browser page that runs in a different process. On the other hand, tests in Cypress are run within the browser directly.

Vitest Browser Mode is similar to Cypress in this regard, meaning that your browser tests are run in the browser. One important distinction here is that since Vitest relies on Vite to compile tests, it can compile your test suite in the browser, enabling features like TypeScript and ESM out of the box. You don't have to write lengthy Jest configurations just to have ESM in your tests anymore 🎉

This is incredibly powerful. Not only does Vitest reuse your existing Vite config, letting your code in production and your code in tests be transformed the same way, you can use its rich plugins system to achieve virtually anything. This makes your testing setup highly customizable.

And, finally, Vitest needs something to render the components. Browser Mode is not specific to any particular front-end framework and presently can render React, Vue, and Svelte components natively. You can also build your custom renderers a bit easier since the rendering actually happens in the DOM.

📜 You are most definitely encouraged to explore the documentation for Vitest Browser Mode.

Benefits of Vitest Browser Mode

Compared to browser-like environments, Vitest Browser Mode has the following benefits:

Browser runtime. No more polyfills, quirky or missing APIs. Your components that meant to be run in the browser can now be tested in the browser as well.
Performance. Coming from the previous point, Vitest can rely on the browser directly instead of using custom polyfills for browser APIs that may be unreliable and slow.
Familiarity. Your browser tests look almost identical to the integration tests with JSDOM that you are used to, making it easier to migrate and introduce in new teams.

There are also a few advantages I find in Vitest Browser Mode when compared to other component-testing approaches:

Consistency. Vitest can use your existing Vite configuration both for your app and for your tests. This means a smaller difference between your production and tested code, which is always a win.
Component rendering model. Running in the browser, your components can render similarly to how they are rendered in production. Vitest has a more straightforward rendering flow compared to Playwright Component Testing, where Playwright has to channel the rendering from the test (Node.js) to the browser.
Flexibility. You can use Vitest for both unit tests, Node.js integration tests, and in-browser integration tests. In fact, Vitest makes that easy to do with the concept of workspaces, which you will get your hands on later in this workshop.

Alright, we've set the scene well. Now it's time you put Vitest Browser Mode to work in your tests. Let's go!