Lesson: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! Then we can get onto Vitest Browser Mode.

Vitest is a test runner. It is very similar to Jest, which has been around for years. You use it to run tests/make assertions, to check if your app is working as expected. 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
  • copying and 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 (which is how you will run them in your CI/CD pipeline, like on GitHub Actions), or run them visually in a UI so you can see what is being rendered in your tests. (It will pop up an instance of Chrome or another browser, so you can see the test being run and debug it there)
  • You can use a syntax that is like a hybrid of Jest/Vitest (with React Testing Library), and E2E tests.
    • (To be more specific: it is more similar to Playwright's API, but if you have only used React Testing Library it will still feel familiar)
  • 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:

  • Install and configure Vitest with Browser Mode
  • Use Vitest Browser Mode and 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!