Setting up Vitest with Next.js

Vite ve React Test Kütüphanesi, Birim Testi için sıklıkla birlikte kullanılır. Bu rehber size Vitest'i Next.js ile nasıl kuracağınızı ve ilk testlerinizi nasıl yazacağınızı gösterecektir.

Bilmekte fayda var: async Sunucu Bileşenleri React ekosistemi için yeni olduğundan, Vitest şu anda bunları desteklememektedir. Senkron Sunucu ve İstemci Bileşenleri için hala birim test leri çalıştırabilirsiniz, ancak async bileşenleri için bir E2E testleri kullanmanızı öneririz.

Quickstart

Hızlı bir şekilde başlamak için Next.js with-vitest örneği ile create-next-app adresini kullanabilirsiniz:

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

Manual Setup

Vitest'i manuel olarak kurmak için vitest adresini ve aşağıdaki paketleri dev bağımlılıkları olarak yükleyin:

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

Projenizin kök dizininde bir vitest.config.ts|js dosyası oluşturun ve aşağıdaki seçenekleri ekleyin:

import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react'
 
export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
  },
})

Vitest'in yapılandırılması hakkında daha fazla bilgi için lütfen Vitest Yapılandırma dokümanlarına bakın.

Ardından, package.json adresinize bir test betiği ekleyin:

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

npm run test adresini çalıştırdığınızda, Vitest varsayılan olarak projenizdeki değişiklikleri izleyecektir.

Creating your first Vitest Unit Test

<Page /> bileşeninin bir başlığı başarıyla oluşturup oluşturmadığını kontrol etmek için bir test oluşturarak her şeyin çalışıp çalışmadığını kontrol edin:

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()
})

Bilmekte fayda var: Yukarıdaki örnekte yaygın olarak kullanılan __tests__ kuralı kullanılmıştır, ancak test dosyaları app yönlendiricisinin içine de yerleştirilebilir.

Running your tests

Ardından, testlerinizi çalıştırmak için aşağıdaki komutu çalıştırın:

npm run test
# or
yarn test
# or
pnpm test
# or
bun test

Additional Resources

Bu kaynakları faydalı bulabilirsiniz:

• Vitest örneği ile Next.js
• Vitest Dokümanları
• React Test Kütüphanesi Dokümanları