Einrichtung von Vitest mit Next.js

Vite und React Testing Library werden häufig zusammen für Unit Tests verwendet. Diese Anleitung zeigt Ihnen, wie Sie Vitest mit Next.js einrichten und Ihre ersten Tests schreiben.

Gut zu wissen: Da async Server Components neu im React-Ökosystem sind, werden sie von Vitest derzeit nicht unterstützt. Während Sie weiterhin Unit Tests für synchrone Server- und Client Components durchführen können, empfehlen wir die Verwendung von E2E-Tests für async Components.

Schnellstart

Sie können create-next-app mit dem Next.js with-vitest-Beispiel verwenden, um schnell loszulegen:

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

Manuelle Einrichtung

Um Vitest manuell einzurichten, installieren Sie vitest und die folgenden Pakete als Dev-Dependencies:

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

Erstellen Sie eine vitest.config.mts|js-Datei im Stammverzeichnis Ihres Projekts und fügen Sie die folgenden Optionen hinzu:

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',
  },
})

Weitere Informationen zur Konfiguration von Vitest finden Sie in der Vitest Configuration-Dokumentation.

Fügen Sie dann ein test-Skript zu Ihrer package.json hinzu:

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

Wenn Sie npm run test ausführen, überwacht Vitest standardmäßig Änderungen in Ihrem Projekt.

Erstellen Ihres ersten Vitest Unit Tests

Überprüfen Sie, ob alles funktioniert, indem Sie einen Test erstellen, der prüft, ob die <Page />-Komponente erfolgreich eine Überschrift rendert:

import Link from 'next/link'

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

Gut zu wissen: Das obige Beispiel verwendet die gängige __tests__-Konvention, aber Testdateien können auch innerhalb des app-Routers platziert werden.

Ausführen Ihrer Tests

Führen Sie dann den folgenden Befehl aus, um Ihre Tests auszuführen:

npm run test
# oder
yarn test
# oder
pnpm test
# oder
bun test

Zusätzliche Ressourcen

Diese Ressourcen könnten hilfreich sein:

• Next.js mit Vitest Beispiel
• Vitest Dokumentation
• React Testing Library Dokumentation