Comment configurer Vitest avec Next.js

Vite et React Testing Library sont souvent utilisés ensemble pour les tests unitaires. Ce guide vous montrera comment configurer Vitest avec Next.js et écrire vos premiers tests.

Bon à savoir : Comme les composants serveur async sont nouveaux dans l'écosystème React, Vitest ne les prend pas encore en charge. Bien que vous puissiez toujours exécuter des tests unitaires pour les composants serveur et client synchrones, nous recommandons d'utiliser des tests E2E pour les composants async.

Démarrage rapide

Vous pouvez utiliser create-next-app avec l'exemple Next.js with-vitest pour commencer rapidement :

npx create-next-app@latest --example with-vitest with-vitest-app

Configuration manuelle

Pour configurer Vitest manuellement, installez vitest et les packages suivants comme dépendances de développement :

# Avec TypeScript
npm install -D vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom vite-tsconfig-paths
# Avec JavaScript
npm install -D vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom

Créez un fichier vitest.config.mts|js à la racine de votre projet et ajoutez les options suivantes :

import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react'
import tsconfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  plugins: [tsconfigPaths(), react()],
  test: {
    environment: 'jsdom',
  },
})

Pour plus d'informations sur la configuration de Vitest, consultez la documentation Vitest Configuration.

Ensuite, ajoutez un script test à votre package.json :

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "test": "vitest"
  }
}

Lorsque vous exécutez npm run test, Vitest surveillera par défaut les changements dans votre projet.

Création de votre premier test unitaire avec Vitest

Vérifiez que tout fonctionne en créant un test pour vérifier si le composant <Page /> affiche correctement un titre :

import Link from 'next/link'

export default function Page() {
  return (
    <div>
      <h1>Home</h1>
      <Link href="/about">About</Link>
    </div>
  )
}

Exécution de vos tests

Ensuite, exécutez la commande suivante pour lancer vos tests :

npm run test
# ou
yarn test
# ou
pnpm test
# ou
bun test

Ressources supplémentaires

Vous pourriez trouver ces ressources utiles :

• Exemple Next.js avec Vitest
• Documentation Vitest
• Documentation React Testing Library