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 composantsasync
.
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',
},
})
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.
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>
)
}
import Link from 'next/link'
export default function Page() {
return (
<div>
<h1>Home</h1>
<Link href="/about">About</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: 'Home' })).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: 'Home' })).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 routeurapp
.
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 :