## 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 Vitest lit le fichier `vite.config` existant. Les alias, plugins React et options de résolution restent identiques entre dev et tests. Les fonctions `describe`, `it`, `expect` et les mocks suivent les habitudes Jest, ce qui facilite l'adoption sans réécrire toute la suite de tests. Le mode watch ne relance que les fichiers impactés. Sur un dépôt front de taille moyenne, le retour après une sauvegarde reste nettement plus court qu'avec une stack de test séparée. Commencez par un seul composant critique (formulaire, panier, authentification) : installez Vitest, écrivez deux ou trois tests de rendu, puis branchez la commande dans votre pipeline CI avant d'étendre la couverture. ## Mise en pratique : configurer Vitest sur React ### Installation Ajoutez Vitest et l'environnement DOM dans votre projet Vite + React : ```bash 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) : ```typescript /// 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 : ```typescript import '@testing-library/jest-dom/vitest'; ``` ### Premier test de composant Dans `App.test.tsx`, vérifiez un rendu minimal : ```typescript 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(); expect(screen.getByRole('heading', { name: /hello world/i })).toBeInTheDocument(); }); }); ``` Lancez la suite en local : ```bash 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.

#vitest

Vitest : tests unitaires sans friction sur React