Testovací framework Vitest vydal svou nejnovější verzi 4.0, která přináší zásadní vylepšení pro vývojáře front-endu i plnohodnotné webové aplikace. Kromě lepší integrace s prohlížeči, nových matcherů a API změn přináší i vizuální regresní testování, které posouvá kvalitu testování UI o úroveň výš.

Co je nového?

Stabilní Browser Mode

Režim pro spouštění testů přímo v prohlížeči už není experimentální. Nainstalujte potřebný balíček, například:

npm install -D @vitest/browser-playwrightCode language: Bash (bash)

Importujte kontext z nového umístění:

import { browser } from 'vitest/browser';Code language: JavaScript (javascript)

Příklad jednoduchého testu:

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

test('zkontrolujte správný titul stránky', async () => {
  await page.goto('https://example.com');
  const title = await page.title();
  expect(title).toBe('Example Domain');
});Code language: JavaScript (javascript)

Vizuální regresní testování

Využijte Visual Regression Testing pro kontrolu vzhledu komponent:

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

test('zkontrolujte vzhled hero sekce', async () => {
  await page.goto('/');
  const hero = page.getByTestId('hero');
  await expect(hero).toMatchScreenshot('hero-section');
});Code language: JavaScript (javascript)

Ověřte, zda je prvek viditelný v okně prohlížeče:

await expect(page.getByTestId('hero')).toBeInViewport();Code language: JavaScript (javascript)

Trace soubory a Playwright integrace

Zapněte trace soubory pro ladění kroků:

await page.goto('/');
await page.getByText('Learn More').click({ trace: 'on' });Code language: JavaScript (javascript)

Po dokončení testu otevřete trace v Playwright Trace Viewer.

Chytřejší locatory

Použijte locator pro práci s iframe:

const frame = page.frameLocator('#my-frame');
await expect(frame.getByText('Inside frame')).toBeInViewport();Code language: JavaScript (javascript)

Ověřte délku lokátorů:

const items = page.getByTestId('list-item');
await expect(items).toHaveLength(3);Code language: JavaScript (javascript)

Nové matchery a typování

expect.assert()

Ověřte vlastní logiku:

expect.assert((value: number) => value > 0, 5); 
// ověřuje, že hodnota je větší než 0Code language: JavaScript (javascript)

expect.schemaMatching()

Validujte data proti schématu (Zod, Valibot, ArkType):

import { z } from 'zod';

const UserSchema = z.object({
  name: z.string(),
  age: z.number(),
});

expect({
  name: 'Alice',
  age: 25,
}).schemaMatching(UserSchema);Code language: JavaScript (javascript)

test.extend()

Rozšiřte testovací kontext s typy:

const customTest = test.extend<{ token: string }>({
  token: async ({}, use) => {
    const token = await login();
    await use(token);
  },
});

customTest('využijte token', async ({ token }) => {
  expect(token).toBeDefined();
});Code language: JavaScript (javascript)

Lepší debugování

• Používejte tlačítko Debug Test ve VS Code pro browser testy.
• Spusťte Vitest s --inspect a připojte se do DevTools:

vitest --inspectCode language: Bash (bash)

Nové a změněné reportéry

• Odstraňte basic reporter → použijte default se summary: false.
• Aktivujte nový tree reporter:

vitest --reporter treeCode language: Bash (bash)

Zobrazí stromovou strukturu testů:

tests/
 ├─ auth.test.ts
 │   ├─ login should succeed
 │   └─ login should fail with wrong password
 └─ dashboard.test.ts
     └─ widgets render correctlyCode language: plaintext (plaintext)

• Používejte verbose reporter pro výpis testů jeden po druhém i lokálně.

⚠️ Změny, které mohou ovlivnit projekty ⚠️

Vitest 4 je major release, takže některé změny nejsou zpětně kompatibilní.
Před upgradem:

• Projděte Migration Guide
• Zkontrolujte Changelog na GitHubu

Shrnutí

Vitest 4.0 výrazně zlepšuje testování front-endu. Stabilní browser mode, vizuální testy, lepší typování a nové nástroje pro debugování z něj dělají univerzální framework pro moderní webové aplikace.

Pokud vyvíjíte aplikace s UI nebo komponentovým systémem, přechod na 4.0 je doporučený.

Více informací: vitest.dev/blog/vitest-4