Nová verze Vitest 4.0 posouvá hranice testování webových aplikací. Přináší stabilní běh testů přímo v prohlížeči, podporu vizuálního regresního testování i chytřejší práci s lokátory a typováním. Vývojáři tak získávají robustnější, rychlejší a přehlednější nástroje pro zajištění kvality UI i logiky aplikací.

Celý článek

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-playwright

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

import { browser } from'vitest/browser';

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');
});

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');
});

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

await expect(page.getByTestId('hero')).toBeInViewport();

Trace soubory a Playwright integrace

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

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

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();

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

const items = page.getByTestId('list-item');
await expect(items).toHaveLength(3);

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ž 0

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);

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();
});

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 --inspect

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

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

vitest --reporter tree

Zobrazí stromovou strukturu testů:

tests/
 ├─ auth.test.ts
 │   ├─ login should succeed
 │   └─ login should fail with wrong password
 └─ dashboard.test.ts
     └─ widgets render correctly

• 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