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 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-Abhängigkeiten:

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

Erstellen Sie eine vitest.config.ts|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'

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

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.

Erster Vitest Unit Test

Überprüfen Sie, ob alles funktioniert, indem Sie einen Test erstellen, der überprü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>
  )
}

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 '../pages/index'

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 '../pages/index'

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

Tests ausführen

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