Vitest : tests unitaires sans friction sur React

Vitest repose sur le même pipeline que Vite

La documentation Vitest présente le framework comme un outil de test natif pour les projets Vite : la résolution des modules, les plugins et la configuration de build sont réutilisés tels quels. Sur une application React déjà servie par Vite, vous évitez ainsi une seconde chaîne de transformation dédiée aux tests, ce qui réduit le temps de démarrage et les écarts entre l'environnement de dev et celui de test.

Pour une équipe qui livre en continu, l'intérêt est concret : moins de fichiers à maintenir, une API familière pour les équipes Jest et une exécution en mode watch adaptée au quotidien. Consultez la page d'accueil Vitest pour le détail des fonctionnalités et des guides de migration.

Ce que Vitest change pour les projets React

Mise en pratique : configurer Vitest sur React

Installation

Ajoutez Vitest et l'environnement DOM dans votre projet Vite + React :

npm install -D vitest jsdom @testing-library/react @testing-library/jest-dom

Configuration Vite

Étendez votre vite.config.ts avec un bloc test (voir le guide de configuration Vitest) :

/// <reference types="vitest/config" />
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './src/test/setup.ts',
  },
});

Créez ensuite src/test/setup.ts pour activer les matchers DOM :

import '@testing-library/jest-dom/vitest';

Premier test de composant

Dans App.test.tsx, vérifiez un rendu minimal :

import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import App from './App';

describe('App', () => {
  it('affiche le titre attendu', () => {
    render(<App />);
    expect(screen.getByRole('heading', { name: /hello world/i })).toBeInTheDocument();
  });
});

Lancez la suite en local :

npx vitest

Comparaison avec Jest et Mocha

Vitest se distingue surtout lorsque Vite est déjà au cœur du projet :

• Démarrage : en réutilisant le graphe de modules Vite, Vitest évite de reconstruire une configuration parallèle. Sur les projets Vite, les retours du mode watch sont en pratique plus réactifs que sur une stack Jest classique sans cache chaud, comme le détaille le comparatif officiel.
• Configuration : un seul fichier vite.config centralise build et tests. Avec Jest, il faut souvent dupliquer alias, transformateurs et mocks dans jest.config.
• Interopérabilité : Vitest vise la compatibilité avec l'écosystème Jest (matchers, mocks, snapshots). Mocha reste pertinent si vous assemblez vous-même chaque brique (assertion, mock, couverture).

Ces différences ne signifient pas que Jest est obsolète : sur un monorepo historique ou un projet Create React App sans migration Vite, Jest reste souvent le choix le plus pragmatique.

Limites honnêtes de Vitest

Malgré sa maturité croissante, Vitest mérite quelques réserves :

• Écosystème en consolidation : certains plugins Jest très spécialisés ne sont pas encore portés ou demandent un contournement documenté dans les issues GitHub.
• Documentation hétérogène : les guides principaux sont solides, mais les cas limites (SSR, workers, ESM pur) exigent parfois de croiser la doc Vite et Vitest.
• Périmètre Vite : hors stack Vite, l'intérêt diminue. Migrer uniquement pour tester sans migrer le build apporte peu de valeur.

Checklist pour intégrer Vitest en CI

• Vitest, jsdom et Testing Library installés dans le dépôt.
• Bloc test présent dans vite.config et fichier setup.ts pour @testing-library/jest-dom.
• Au moins un test de composant critique validé en local avec npx vitest run.
• Commande vitest run ajoutée au pipeline CI avant merge sur la branche principale.
• Rapport de couverture activé si votre équipe suit un seuil minimal (option coverage dans Vitest).

Pour aller plus loin sur le blog

Approfondissez la qualité de code et la chaîne d'outils avec Biome : alternative rapide à ESLint et Prettier et Développeur et IA : gagner du temps sans perdre le contrôle du code.

Sources

• Documentation Vitest
• Comparaisons Vitest (Jest, Mocha)
• Dépôt GitHub Vitest
• Testing Library pour React

Vitest réduit la friction entre développement Vite et tests React : une configuration, une commande en CI et des retours rapides suffisent pour sécuriser les évolutions du front sans alourdir la stack.