Vitest en 2026 : le remplaçant de Jest que tout projet Vite devrait utiliser

Vitest est un framework de tests unitaires ultra-rapide, conçu spécifiquement pour les projets qui utilisent Vite comme outil de build. Si tu as déjà souffert de configurations interminables pour faire tourner tes tests avec des outils classiques, Vitest va changer ta vision des choses. Il reprend la syntaxe que beaucoup connaissent déjà, il s’installe en deux minutes, et il est pensé pour être rapide dès le départ.

Dans cet article, on va voir ce que Vitest fait exactement, pourquoi il monte en puissance en 2026, comment l’installer, et surtout comment écrire tes premiers tests sans te perdre dans la config.

Pourquoi Vitest existe et à quoi il sert vraiment ?

Vitest est né d’un constat simple : les outils de test existants ne sont pas pensés pour les projets modernes qui utilisent ESModules et Vite. Quand tu travailles avec Vite.js comme outil de build, tu te retrouves souvent à jongler entre deux configs différentes : une pour Vite, une pour ton framework de tests. C’est redondant, lent, et source d’erreurs.

Vitest résout ça directement. Il réutilise ta configuration Vite existante pour faire tourner les tests. Résultat : zéro duplication, démarrage immédiat, et une cohérence totale entre ton environnement de développement et tes tests.

Il a été créé par les mêmes personnes qui maintiennent Vite et VueUse. Ce n’est pas un projet amateur sorti de nulle part. En 2026, il est devenu la référence pour tout projet moderne basé sur Vite, que tu utilises React, Vue, Svelte, ou du JavaScript vanilla.

En quoi Vitest est différent des autres outils de test ?

La différence principale entre Vitest et les autres frameworks de test, c’est l’intégration native avec Vite et le support natif des ESModules. Les outils plus anciens ont été conçus à une époque où CommonJS dominait. Ils ont dû s’adapter, souvent avec des hacks ou des configurations complexes. Vitest part d’une base propre.

Voici les points qui font vraiment la différence :

• Vitesse : Vitest utilise les workers natifs de Node.js et le HMR de Vite pour ne relancer que les tests affectés par tes modifications.
• Syntaxe identique à Jest : si tu as déjà utilisé Jest, tu retrouves describe, it, expect, beforeEach. La migration est quasi transparente.
• Support TypeScript natif : pas besoin de babel, de ts-jest ou d’un plugin supplémentaire. Vitest comprend TypeScript nativement via Vite.
• Browser Mode stable : depuis Vitest 4.0 (octobre 2025), le Browser Mode est officiellement stable. Tu peux faire tourner tes tests dans un vrai navigateur au lieu d’un environnement simulé, avec support des Playwright Traces pour déboguer.
• UI intégrée : Vitest propose une interface graphique dans le navigateur pour visualiser tes tests en temps réel (nécessite le package @vitest/ui).
• Mode watch ultra-réactif : il ne relance pas tous les tests à chaque changement, seulement ceux qui sont concernés.

Si tu travailles avec TypeScript au quotidien, ce point natif est un gain de temps massif. Plus besoin de configurer un transpileur juste pour que tes tests comprennent tes types.

Comment installer et configurer Vitest en moins de 5 minutes ?

L’installation de Vitest se fait en une seule commande, et la configuration minimale tient en cinq lignes. C’est volontairement simple. Les créateurs ont pris le parti de ne pas t’obliger à écrire un fichier de config pour démarrer.

Dans un projet existant avec Vite, tu installes Vitest comme dépendance de développement :

npm install --save-dev vitest

Ensuite, tu ajoutes deux scripts dans ton package.json. Pour le script UI, installe également @vitest/ui :

npm install --save-dev @vitest/ui

{
  "scripts": {
    "test": "vitest",
    "test:ui": "vitest --ui"
  }
}

C’est tout. Tu peux lancer npm run test et Vitest détecte automatiquement tous tes fichiers qui se terminent par .test.ts, .test.js, .spec.ts ou .spec.js.

Si tu veux aller un peu plus loin, tu peux ajouter un bloc test dans ton vite.config.ts :

import { defineConfig } from 'vite'

export default defineConfig({
  test: {
    environment: 'jsdom', // pour tester des composants UI
    globals: true,        // accès à describe/it/expect sans import
  }
})

L’option globals: true te permet d’écrire tes tests sans importer explicitement describe ou expect à chaque fois. C’est optionnel, mais beaucoup de devs apprécient ce confort.

Comment écrire ton premier test avec Vitest ?

Un test Vitest suit exactement la même structure qu’un test Jest : un bloc describe pour regrouper les tests, et des blocs it ou test pour décrire chaque comportement attendu.

Voici un exemple concret. Imagine que tu as une fonction add dans un fichier math.ts :

// math.ts
export function add(a: number, b: number): number {
  return a + b
}

Ton fichier de test math.test.ts ressemble à ça :

import { describe, it, expect } from 'vitest'
import { add } from './math'

describe('add()', () => {
  it('retourne la somme de deux nombres', () => {
    expect(add(2, 3)).toBe(5)
  })

  it('gère les nombres négatifs', () => {
    expect(add(-1, 1)).toBe(0)
  })
})

Tu lances npm run test et tu vois immédiatement si tes tests passent ou échouent. Si tu modifies math.ts, seul ce test est relancé. Pas les 200 autres de ton projet.

Pour tester des composants UI, Vitest s’utilise avec des outils comme Storybook pour l’aspect visuel, mais aussi avec Testing Library pour tester le comportement des composants React ou Vue directement dans Vitest.

Vitest peut-il vraiment remplacer Jest dans un projet existant ?

Dans la majorité des cas, migrer de Jest vers Vitest se fait en moins d’une heure, surtout si ton projet utilise déjà Vite. La syntaxe est volontairement compatible. Les describe, it, expect, vi.mock() (l’équivalent de jest.mock()), tout ça existe et fonctionne pareil.

Les étapes de migration sont simples :

1. Désinstalle Jest et ses dépendances associées (babel-jest, ts-jest, etc.)
2. Installe Vitest
3. Remplace jest.config.js par un bloc test dans vite.config.ts
4. Remplace les imports jest par des imports vitest (ou active globals: true)
5. Lance tes tests

Les cas où la migration est plus complexe : si tu utilises des fonctionnalités très spécifiques de Jest comme les timers manuels avancés ou certains matchers personnalisés. Mais pour la grande majorité des projets, ça passe sans douleur.

Vitest s’intègre aussi très bien avec Next.js : la documentation officielle de Next.js inclut désormais une page dédiée à Vitest et un exemple with-vitest accessible directement via create-next-app. Ce n’est plus seulement une option communautaire.

Quels sont les pièges à éviter quand on débute avec Vitest ?

Comme tout outil de test, Vitest a quelques subtilités qui peuvent piéger les débutants si on ne les connaît pas.

Le premier piège : oublier de configurer l’environnement. Par défaut, Vitest tourne dans un environnement Node.js pur. Si tu testes des composants UI qui manipulent le DOM, tu dois passer à jsdom ou happy-dom dans ta config. Sans ça, les tests qui accèdent à document ou window plantent directement.

Le deuxième piège : les mocks. La syntaxe vi.mock() fonctionne comme jest.mock(), mais elle doit être appelée au niveau du module, pas à l’intérieur d’une fonction. Si tu essaies de mocker quelque chose à l’intérieur d’un it(), ça ne fonctionnera pas comme tu l’attends.

Le troisième piège : confondre vi.fn() et vi.spyOn(). Le premier crée une fonction mock de zéro. Le second espionne une fonction existante sans la remplacer. Les deux sont utiles, mais dans des contextes différents.

Quatrième piège : ne pas utiliser le mode watch. Beaucoup de débutants lancent vitest run (qui exécute les tests une fois et s’arrête) alors que vitest tout seul lance le mode watch, bien plus pratique en développement actif.

Si tu veux aller plus loin sur la validation des données dans tes tests, associer Vitest avec Zod pour valider tes structures de données est une combinaison très efficace pour des tests robustes.

En résumé : Vitest

Vitest est devenu en 2026 le choix évident pour tout projet basé sur Vite qui a besoin de tests unitaires rapides et bien intégrés. Depuis la version 4.0 (octobre 2025), le Browser Mode est stable, les tests de régression visuelle sont disponibles nativement via toMatchScreenshot, et Next.js référence officiellement Vitest dans sa documentation. Il reprend la syntaxe familière de Jest, supporte TypeScript nativement, s’installe en une commande, et il est significativement plus rapide grâce à son intégration directe avec Vite. Si tu démarres un nouveau projet ou si tu cherches à simplifier ta stack de tests, Vitest mérite clairement sa place dans ta boîte à outils. Et si tu veux comprendre comment ça s’articule avec le reste de ton écosystème JavaScript, jette un oeil à ce qu’on explique sur Node.js et son écosystème.

Questions fréquentes sur Vitest

Vitest fonctionne-t-il sans Vite ?

Oui, Vitest peut techniquement fonctionner sans que ton projet utilise Vite comme bundler principal. Mais l’intérêt principal de Vitest est justement cette intégration avec Vite. Si tu n’utilises pas Vite du tout, tu peux l’utiliser quand même, mais tu perds une partie des avantages. Dans ce cas, un outil comme Jest peut rester pertinent.

Vitest supporte-t-il les tests de composants React ?

Oui, en combinant Vitest avec React Testing Library et en configurant l’environnement sur jsdom ou happy-dom, tu peux tester des composants React comme tu le ferais avec Jest + Testing Library. La syntaxe est identique et la migration est simple si tu viens de Jest.

Quelle est la différence entre vitest et vitest run ?

La commande vitest lance le mode watch : les tests se relancent automatiquement à chaque modification de fichier. La commande vitest run exécute tous les tests une seule fois puis s’arrête. C’est cette deuxième forme qu’on utilise généralement dans les pipelines CI/CD.

Vitest est-il compatible avec les projets TypeScript sans configuration supplémentaire ?

Oui. Vitest utilise Vite en interne, qui supporte TypeScript nativement via esbuild. Tu n’as besoin d’aucun plugin, d’aucun transpileur séparé, d’aucune configuration Babel. Tu crées ton fichier .test.ts et ça fonctionne directement.

Peut-on mesurer la couverture de code avec Vitest ?

Oui, Vitest intègre la couverture de code via le package @vitest/coverage-v8 ou @vitest/coverage-istanbul. Tu l’installes, tu ajoutes coverage: { provider: 'v8' } dans ta config, et tu lances vitest run --coverage. Tu obtiens un rapport détaillé des lignes, fonctions et branches couvertes par tes tests.

Vitest fonctionne-t-il avec des projets Vue ou Svelte ?

Absolument. Vitest est framework-agnostique. Il fonctionne avec Vue, Svelte, React, Solid, ou du JavaScript/TypeScript pur. Pour chaque framework, il existe des plugins de test dédiés (comme @vue/test-utils pour Vue) qui s’intègrent naturellement avec Vitest. C’est même l’environnement de test recommandé dans l’écosystème Vue depuis 2023.