JavaScript: Testing Framework Vitest 4.0 Brings Visual Regression Testing

Vitest is available in the new main version 4.0. Updates are available for, among others, the browser mode, handling the end-to-end testing framework Playwright, and debugging with the Visual Studio Code extension.

Vitest is a testing framework based on the frontend build tool Vite.js, which focuses on speed. Both are available as open source, but the Vite team is currently also working on the commercial offering Vite+, which is intended to represent a unified JavaScript toolchain.

JavaScript Conference: Ideas Wanted

Call for Proposals for enterJS 2026 on June 16 and 17 in Mannheim: The organizers are looking for talks and workshops on JavaScript and TypeScript, frameworks, tools and libraries, security, UX, and more. Discounted Blind-Bird tickets are available until the program starts.

Browser Mode Available Stable

The browser mode is a feature of the Vitest API that was previously marked as experimental and has now reached stable status. This allows tests to be executed natively in the browser.

To specify a provider, the installation of a separate package is now necessary: @vitest/browser-playwright, @vitest/browser-webdriverio, or @vitest/browser-preview. This allows developers to work more easily with custom options, and they can omit the comments /// <reference.

Visual Regression Testing in Browser Mode

The browser mode also receives a new function: Visual Regression Testing. This means Vitest creates screenshots of UI components and pages and compares them with reference images to detect unintended visual changes. Visual Regression Testing can be performed using the assertion toMatchScreenshot, as the development team demonstrates:

import { expect, test } from 'vitest'
import { page } from 'vitest/browser'

test('hero section looks correct', async () => {
  // ...the rest of the test

  // capture and compare screenshot
  await expect(page.getByTestId('hero')).toMatchScreenshot('hero-section')
})

Updates for Connection to Playwright and VS Code

Vitest 4.0 brings an update for use with the end-to-end testing framework Playwright: It can now generate Playwright traces if the trace option is set in the test.browser configuration, or using the option --browser.trace=on, where off, on-first-retry, on-all-retries, or retain-on-failure can also be set. The created trace file can be opened with the Playwright Trace Viewer. There is also a new feature in the extension for Visual Studio Code: The "Debug Test" button can now be used when running browser tests.

The complete list of changes is listed by the Vitest team in the changelog and goes into more detail on the most important new features in a blog post. Since there are some breaking changes, it is recommended that developers consult the migration guide before upgrading.

(mai)