Installing Vitest Browser Mode

Installing Vitest Browser Mode is quite simple, you just have to:

  • install a few packages
  • make a new configuration file for Vitest Browser Mode
  • install a 'provider' (we will use Playwright)
  • Then run your tests

Note: although we are going to install Playwright, this is not a typical E2E test like you'd use Playwright for. Instead, Playwright is used as a provider in order to control a browser.

Vitest is already very popular for testing things (without the Browser Mode).

So it is likely that you may already have some of the basic Vitest packages installed and configured.

In this lesson we'll go through step-by-step on how to install it for a typical React-based app. This will apply to Next.js-based apps too.

The easiest way to get this set up is to clone this React-based starter repo that has Vitest Browser Mode already set up .

I'd recommend you clone and get that set up for the remainder of the lessons in this course, so you can easily copy/paste things and play along with the course

Loading full lesson...