What is Vitest Browser Mode

Welcome to this course about Vitest Browser Mode.

This course is unlike the other courses on HowToTestFrontend.com , which are interactive and allow you to run tests in your browser as you learn from each lesson.

Despite being "browser mode", getting Vitest Browser Mode working in a production app is not straightforward, so I am spending time writing the content first. I will then work on making it interactive!

But you can run the example code easily as you follow the course.

Every lesson will have self-contained blocks of code that you can easily copy and paste into your code editor locally, so you can run them on your machine.

I'd suggest that you check out my Vitest starter repo , so you can get up and running in a couple of minutes. Then you can copy and paste code into test files and run them locally (from the command line in headless mode, or visually in UI mode - all will be explained over the next few lessons).

Ok, so what is Vitest Browser Mode?

I think to start with, I need to go back a step and explain what Vitest is!

Vitest is a test runner. It is very similar to Jest, which has been around for years. If you have written or worked with any JavaScript based tests in the last few years, I would bet a lot of money that you probably used Jest or Vitest.

When you test frontend applications in Vitest (or Jest) with React Testing Library, it always simulates a real browser/DOM.

There are packages out there that simulate how the DOM works (jsdom is the most popular one).

To be completely honest, these are great 99% of the time.

But that 1% of time when they don't support something is a complete pain to work around.

Often this happens when you need to test a component that uses a Web API that isn't supported by jsdom - for example:

  • window.sessionStorage or window.localStorage
  • things like MutationObserver, IntersectionObserver or ResizeObserver
  • copy/pasting with navigator.clipboard
  • window.location and URL manipulation

There are of course end-to-end (E2E) test frameworks like Cypress or Playwright. They run real browsers and don't have these limitations. However, they generally work by running a web server and testing against the whole page.

(Note: There are things like Playwright component tests, which are similar. But that is a topic for another day).

Vitest Browser Mode is like a mix of both (Jest/Vitest + E2E).

  • The tests run in a real browser (Chromium for example)
  • They can be headless (all in command line, basically), or visually in a UI so you can see what is being rendered in your tests
  • You can use a syntax that is like a hybrid of Jest/Vitest (with React Testing Library), and E2E tests
  • Has built in support for visual regression tests

What this course will cover

The aim of this course is to teach you everything you need to know to use Vitest Browser Mode, write your own tests, and maintain/debug those tests.

It will cover all the features you are likely to see in day-to-day use.

(and advanced but less common features too)

After completing this course, you will be able to install and set it up, write tests, select elements correctly on the page, and follow Vitest Browser Mode conventions so others can read your tests and understand what is going on!

I am honestly so excited to work with Vitest Browser Mode. It is an exciting development in the frontend testing ecosystem.

Head to the next lesson to get started!