JavaScript: Testing-Framework Vitest 4.0 bringt visuelles Regressionstesting

Vitest liegt in der neuen Hauptversion 4.0 vor. Updates gibt es unter anderem für den Browser Mode, den Umgang mit dem End-to-End-Testing-Framework Playright und das Debugging mit der Visual-Studio-Code-Erweiterung.

Bei Vitest handelt es sich um ein Testing-Framework auf Basis des Frontend-Build-Tools Vite.js, das einen Fokus auf Schnelligkeit legt. Beide sind quelloffen verfügbar, jedoch arbeitet das Vite-Team derzeit auch an dem kommerziellen Angebot Vite+, das eine einheitliche JavaScript-Toolchain darstellen soll.

Browser Mode stabil verfügbar

Der Browser Mode ist ein Feature der Vitest-API, das bislang als experimentell gekennzeichnet war und nun den stabilen Status erreicht hat. Damit lassen sich Tests nativ im Browser ausführen.

Um einen Provider festzulegen, ist nun die Installation eines separaten Pakets notwendig: @vitest/browser-playwright, @vitest/browser-webdriverio oder @vitest/browser-preview. Damit können Developer einfacher mit benutzerdefinierten Optionen arbeiten, und sie können auf die Kommentare /// verzichten.

Visuelles Regressionstesten im Browser Mode

Der Browser Mode erhält darüber hinaus eine neue Funktion: Visual Regression Testing. Das bedeutet, Vitest erstellt Screenshots von UI-Komponenten und Seiten und vergleicht diese mit Referenzbildern, um unbeabsichtigte visuelle Änderungen festzustellen. Das Visual Regression Testing lässt sich durch die Assertion toMatchScreenshot ausführen, wie das Entwicklungsteam demonstriert:

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 für die Anbindung an Playwright und VS Code

Vitest 4.0 bringt ein Update für die Verwendung mit dem End-to-End-Testing-Framework Playwright: Es kann nun Playwright Traces generieren, wenn die trace-Option in der test.browser-Konfiguration gesetzt ist, oder mithilfe der Option --browser.trace=on, in der sich auch off, on-first-retry, on-all-retries oder retain-on-failure festlegen lassen. Die erstellte Trace-Datei lässt sich mit dem Playwright Trace Viewer öffnen. In der Extension für Visual Studio Code gibt es ebenfalls eine Neuerung: Dort lässt sich nun der „Debug Test“-Button beim Ausführen von Browser-Tests nutzen.

Die komplette Liste der Änderungen führt das Vitest-Team im Changelog auf und geht in einem Blogeintrag detaillierter auf die wichtigsten Neuerungen ein. Da es einige Breaking Changes gibt, empfiehlt es Entwicklerinnen und Entwicklern, vor einem Upgrade die Migrationsanleitung zu beachten.

(mai)