Vitest Browser Mode Course
Learn everything you need to know to get up to speed with Vitest Browser Mode, to run your tests in a very realistic, fast and (optionally) visual way!
This is a course about Vitest Browser Mode.
- learn how to install Vitest Browser Mode, and configure it
- how it differs from normal Vitest tests, or E2E tests
- and how to use all of its features to test your apps in this new and exciting way
Unlike the other courses on this site, it is not interactive and is more text-based.
I personally think that Vitest Browser Mode is a key part of your arsenal of tools to help write tests, so it is really important to understand it.
If you want to read a blog post introducing the basics of Vitest Browser Mode, check out my blog post here, then return to this course if you want to learn it all in depth and become an expert on it!
Note: Right now this course focuses only on testing React components in Vitest Browser Mode (and not Svelte or Vue - yet!)
Course Lessons
23 lessons to learn everything about Vitest Browser Mode
Vitest Browser Introduction
Vitest Browser Mode Setup
Installing Vitest Browser Mode
Step-by-step guide to installing and configuring Vitest Browser Mode
Configuring & Selecting a Provider in Vitest Browser Mode
Learn the differences between the three providers (Playwright, Preview, and WebdriverIO) and which one is best for your testing needs
Vitest configuration projects
How to use projects in your Vitest config file
Setting up Vitest Browser Mode in your CI/CD Pipeline
Guide to getting your CI/CD pipeline (like GitHub Actions) running your Vitest Browser Mode tests in headless mode
Vitest Browser Mode Fundamentals
Writing Vitest Browser Mode Tests Introduction
Introduction to writing simple tests with Vitest Browser Mode, including rendering components and making basic assertions
Rendering React Components in Browser Mode
Learn how to use vitest-browser-react to render and test React components the same way they render in your application
Testing Hooks in Vitest Browser Mode
Learn how to test React hooks in Vitest Browser Mode
Vitest Browser Mode Locators
Vitest Browser Mode Locators - Introduction
A full guide to using Locators to find and query elements in your tests, understanding the page API and element selection
Locators - getting a single element
Lesson covering everything you need to know about querying for a single element on the page
Locators - async behaviour/polling
How to query for elements asynchronously, with the built in polling methods to retry until your assertions pass (or it fails and times out). This is mostly with expect.element()
Locators - getting multiple elements
Lesson explaining how to query for multiple elements, and how to make assertions against them
Locators - asserting with no matching elements
Explaining how to use Locator query functions and assertions to check that something is NOT rendered
Vitest Browser Mode Locators - The Seven Query Functions
Detailed overview of the seven query functions: getByRole, getByAltText, getByLabelText, getByPlaceholder, getByText, getByTitle, and getByTestId
Vitest Browser Mode Locators - The Modifier Functions
Learn how to combine regular locator functions with modifiers: nth, first, last, and, or, and filter to create powerful element queries
Vitest Browser Mode Locators - The Interactive Methods
Learn the methods to initiate interactivity: click, dblClick, clear, hover, unhover, fill, selectOptions, screenshot, and element queries
Vitest Browser Mode Assertions
Vitest Browser Mode Assertions Overview
Overview of the main assertions available in Vitest Browser Mode, including element state, visibility, and content assertions
Vitest Browser Mode Assertions - Forms
Deep dive into the assertions that can be used with forms and inputs
Vitest Browser Mode Assertions - Accessibility
How to make use of the Vitest Browser Mode accessibility assertions
Vitest Browser Mode Interactivity
Vitest Browser Mode Advanced
Browser Mode Context Module
Overview about the Vitest Browser Mode context module, giving you access to things like userEvents, commands, the page object, and more
Vitest Browser Mode Visual Regression Testing Guide
Lesson on what Vitest Browser Mode Visual Regression tests are, how to use them, and importantly how to avoid flaky tests!
Vitest Browser Mode mocking and spyOn
How to spyOn and mock in Vitest Browser Mode