Vitest Browser Mode

Définition

Mode de Vitest qui exécute les tests dans un vrai navigateur (via Playwright ou WebDriverIO) au lieu de simuler le DOM avec jsdom ou happy-dom. Stable depuis Vitest 4.0 (22 octobre 2025), il s'installe avec un fournisseur dédié (@vitest/browser-playwright, @vitest/browser-webdriverio, @vitest/browser-preview) et apporte la régression visuelle (toMatchScreenshot) et les traces Playwright, avec la même API de test.

Analogie

Tester une voiture sur une vraie route (navigateur) plutôt que sur un banc qui imite la route (jsdom) : mêmes essais, mais on découvre les nids-de-poule réels.

Exemple de code

// Button.test.tsx – tourne dans Chromium, pas dans jsdom
import { render } from 'vitest-browser-react';
import { page } from 'vitest/browser';
import { expect, test } from 'vitest';
import { Button } from './Button';

test('clic → état actif', async () => {
  await render(<Button>Payer</Button>);
  const btn = page.getByRole('button', { name: 'Payer' });
  await btn.click();                       // vrai événement navigateur
  await expect.element(btn).toHaveAttribute('aria-pressed', 'true');
  await expect(btn).toMatchScreenshot();   // régression visuelle (Vitest 4)
});

Cas d'usage

Composants dépendant de vraies API navigateur (layout, IntersectionObserver, CSS, canvas) que jsdom ne reproduit pas fidèlement.

Anti-pattern

Termes liés

Sources

• vitest.dev/blog/vitest-4
• voidzero.dev/posts/announcing-vitest-4