Vitest 4.0 Released with Stable Browser Mode and Visual Regression Testing

by Ada
Last updated on May 24, 2024
Vitest 4.0 Released with Stable Browser Mode and Visual Regression Testing

The Vitest team has announced the release of Vitest 4.0, bringing significant improvements to the popular testing framework. This major release includes the stabilization of Browser Mode, new visual regression testing capabilities, and enhanced Playwright integration.

Browser Mode Now Stable

After extensive development, Browser Mode has graduated from experimental to stable. This feature allows developers to run tests in real browser environments, providing more accurate testing for browser-specific functionality.

The update includes some changes to package installation:

  • Requires separate provider packages: @vitest/browser-playwright, @vitest/browser-webdriverio, or @vitest/browser-preview
  • Simplified context API - import directly from vitest/browser instead of @vitest/browser/context

Visual Regression Testing

Vitest 4.0 introduces a new toMatchScreenshot assertion that enables visual regression testing. This feature helps detect unintended UI changes by comparing component screenshots against reference images.

Additionally, a new toBeInViewport matcher checks element visibility using the IntersectionObserver API, making it easier to verify that critical UI elements are actually visible to users.

Enhanced Playwright Integration

Debugging gets easier with Playwright traces support. Developers can now generate traces by setting the trace configuration option, with traces available as test annotations in reporters like the HTML reporter.

The locator API has also been enhanced with:

  • frameLocator support for finding elements inside iframes
  • A length property on all locators for use with the toHaveLength matcher

New API Features

expect.assert

Provides convenient access to assertion methods without import conflicts, streamlining test code.

expect.schemaMatching

Validates values against Standard Schema v1 objects, with built-in support for popular validation libraries including Zod, Valibot, and ArkType.

Type-Aware Hooks

Lifecycle methods like beforeEach can now reference extended test context directly with full type safety.

Advanced APIs

Six new advanced API methods have been added for test parsing, coverage control, and execution monitoring, giving developers more fine-grained control over test execution.

Breaking Changes

Developers upgrading to Vitest 4.0 should be aware of these changes:

  • The basic reporter has been removed - use default with summary: false instead
  • The default reporter now only displays tests as a tree when running a single file
  • The verbose reporter behavior has changed to always print tests individually upon completion

Community and Support

The release represents contributions from over 640 contributors, with financial backing from VoidZero, StackBlitz, NuxtLabs, Zammad, and GitHub Sponsors.

Learn More

For complete details and migration guidance, visit the official Vitest 4.0 announcement.