Configuration de Vitest avec Next.js

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

Bon à savoir : Les composants serveur async étant nouveaux dans l'écosystème React, Vitest ne les prend pas encore en charge. Bien que vous puissiez 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 paquets suivants comme dépendances de développement :

npm install -D vitest @vitejs/plugin-react jsdom @testing-library/react
# ou
yarn add -D vitest @vitejs/plugin-react jsdom @testing-library/react
# ou
pnpm install -D vitest @vitejs/plugin-react jsdom @testing-library/react
# ou
bun add -D vitest @vitejs/plugin-react jsdom @testing-library/react

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

import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react'

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

import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react'

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

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

Ajoutez ensuite 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>Accueil</h1>
      <Link href="/about">À propos</Link>
    </div>
  )
}

import Link from 'next/link'

export default function Page() {
  return (
    <div>
      <h1>Accueil</h1>
      <Link href="/about">À propos</Link>
    </div>
  )
}

import { expect, test } from 'vitest'
import { render, screen } from '@testing-library/react'
import Page from '../app/page'

test('Page', () => {
  render(<Page />)
  expect(screen.getByRole('heading', { level: 1, name: 'Accueil' })).toBeDefined()
})

import { expect, test } from 'vitest'
import { render, screen } from '@testing-library/react'
import Page from '../app/page'

test('Page', () => {
  render(<Page />)
  expect(screen.getByRole('heading', { level: 1, name: 'Accueil' })).toBeDefined()
})

Bon à savoir : L'exemple ci-dessus utilise la convention courante __tests__, mais les fichiers de test peuvent aussi être placés directement dans le routeur app.

Exécution de vos tests

Exécutez ensuite la commande suivante pour lancer vos tests :

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

Ressources supplémentaires

Ces ressources pourraient vous être utiles :

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