Next.js ile test stratejileri: Unit, Integration ve E2E testleri

Next.js ile Test Stratejileri: Kapsamlı Bir Rehber

Modern web geliştirme sürecinin vazgeçilmez bir parçası olan test yazma, özellikle framework seçiminden sonra en çok tartışılan konulardan biridir. Next.js projelerinde doğru test stratejisi belirlemek, hem geliştirme hızını artırır hem de production ortamında yaşanabilecek sorunların önüne geçer. Bu rehberde Jest, React Testing Library, Playwright ve Cypress araçlarını kullanarak kapsamlı bir test piramidi nasıl oluşturulacağını adım adım inceleyeceğiz.

Test Piramidi Nedir ve Neden Önemlidir?

Test piramidi, yazılım testlerinin nasıl organize edilmesi gerektiğini gösteren bir modeldir. Piramidin tabanında birim testleri (unit tests), orta katmanda entegrasyon testleri (integration tests) ve en üstte uçtan uca testler (E2E tests) yer alır. Her katman farklı bir amaca hizmet eder ve birbirini tamamlar.

Birim testleri, en hızlı ve en ucuz test türüdür. Tek bir fonksiyonu veya bileşeni izole bir şekilde test ederler. Entegrasyon testleri ise birden fazla bileşenin birlikte nasıl çalıştığını doğrular. E2E testleri ise gerçek kullanıcı senaryolarını tarayıcı ortamında simüle ederek tüm uygulamayı test eder.

Next.js Projesinde Jest Kurulumu

Jest, JavaScript ekosisteminde en yaygın kullanılan test çerçevesidir. Next.js 13 ve üzeri sürümlerde yerleşik olarak Jest desteği gelmiştir. Projenizi oluştururken test seçeneğini işaretlediğinizde Jest otomatik olarak yapılandırılır.

Jest'i manuel olarak eklemek için terminalde şu komutu çalıştırabilirsiniz:

```bash npm install --save-dev jest @testing-library/react @testing-library/jest-dom jest-environment-jsdom ```

Ardından jest.config.js dosyasını oluşturun:

```javascript const nextJest = require('next/jest')

const createJestConfig = nextJest({ dir: './' })

module.exports = createJestConfig({ testEnvironment: 'jest-environment-jsdom', setupFilesAfterSetup: ['<rootDir>/jest.setup.js'], moduleNameMapper: { '^\\.\\.(.)$': '<rootDir>/../$1', '^\\@/(.)$': '<rootDir>/src/$1', }, }) ```

Birim Testleri: Bileşen Testlerini Yazma

Next.js projelerinde bileşen testleri, UI'ın doğru render edildiğini ve kullanıcı etkileşimlerine doğru tepki verdiğini doğrular. React Testing Library, bu konuda en güçlü araçlardan biridir.

Örneğin, bir Button bileşeni için test yazalım:

```javascript import { render, screen, fireEvent } from '@testing-library/react' import Button from '@/components/Button'

describe('Button Bileşeni', () => { it('doğru metni gösterir', () => { render(<Button>Click Me</Button>) expect(screen.getByText('Click Me')).toBeInTheDocument() })

it('tıklama olayını doğru tetikler', () => { const handleClick = jest.fn() render(<Button onClick={handleClick}>Click</Button>) fireEvent.click(screen.getByText('Click')) expect(handleClick).toHaveBeenCalledTimes(1) })

it('devre dışıyken tıklanamaz', () => { const handleClick = jest.fn() render(<Button onClick={handleClick} disabled>Click</Button>) fireEvent.click(screen.getByText('Click')) expect(handleClick).not.toHaveBeenCalled() }) }) ```

API Route Testleri

Next.js'in en güçlü özelliklerinden biri olan API route'larını test etmek, backend mantığının doğruluğunu sağlamak açısından kritiktir. Bu testler genellikle birim testleri kategorisine girer.

```javascript import { createMocks } from 'node-mocks-http' import handler from '@/pages/api/users'

describe('/api/users endpointi', () => { it('GET isteğiyle kullanıcı listesini döndürür', async () => { const { req, res } = createMocks({ method: 'GET' }) await handler(req, res) expect(res.statusCode).toBe(200) const data = JSON.parse(res._getData()) expect(Array.isArray(data)).toBe(true) })

it('geçersiz veriyle 400 döndürür', async () => { const { req, res } = createMocks({ method: 'POST', body: { email: 'gecersiz' } }) await handler(req, res) expect(res.statusCode).toBe(400) }) }) ```

Entegrasyon Testleri: Sayfa Bileşenlerini Test Etme

Next.js'te entegrasyon testleri, sayfa bileşenlerinin birlikte nasıl çalıştığını doğrulamak için kullanılır. Bu testler genellikle getServerSideProps veya getStaticProps gibi veri çekme mekanizmalarını da kapsar.

```javascript import { render, screen, waitFor } from '@testing-library/react' import { rest } from 'msw' import { setupServer } from 'msw/node' import ProductPage from '@/pages/products/[id]'

const server = setupServer( rest.get('/api/products/1', (req, res, ctx) => { return res(ctx.json({ id: 1, name: 'Test Ürünü', price: 100 })) }) )

beforeAll(() => server.listen()) afterEach(() => server.resetHandlers()) afterAll(() => server.close())

describe('ProductPage entegrasyon testi', () => { it('ürün bilgilerini doğru gösterir', async () => { render(<ProductPage product={{ id: 1, name: 'Test Ürünü', price: 100 }} />) await waitFor(() => { expect(screen.getByText('Test Ürünü')).toBeInTheDocument() expect(screen.getByText('100 TL')).toBeInTheDocument() }) }) }) ```

Playwright ile E2E Testleri

Playwright, modern ve güçlü bir E2E test çerçevesidir. Multi-browser desteği, hızlı çalışma süresi ve güvenilir otomasyon yetenekleriyle öne çıkar. Next.js projelerinde Playwright kurulumu oldukça basittir:

```bash npm install -D @playwright/test npx playwright install ```

playwright.config.ts dosyasını yapılandırın:

```typescript import { defineConfig } from '@playwright/test'

export default defineConfig({ testDir: './e2e', timeout: 30000, use: { baseURL: 'http://localhost:3000', headless: true, viewport: { width: 1280, height: 720 }, }, webServer: { command: 'npm run dev', port: 3000, reuseExistingServer: !process.env.CI, }, }) ```

Örnek bir E2E test senaryosu:

```typescript import { test, expect } from '@playwright/test'

test('ana sayfa yüklenir ve başlık görünür', async ({ page }) => { await page.goto('/') await expect(page).toHaveTitle(/Kaliteli Website/) })

test('iletişim formu gönderimi', async ({ page }) => { await page.goto('/iletisim') await page.fill('[data-testid="name-input"]', 'Ahmet Yılmaz') await page.fill('[data-testid="email-input"]', 'ahmet@test.com') await page.fill('[data-testid="message-input"]', 'Bu bir test mesajıdır.') await page.click('[data-testid="submit-button"]') await expect(page.locator('.success-message')).toBeVisible() }) ```

Cypress ile E2E Testleri

Cypress, another powerful E2E testing tool, offers a different approach with its time-travel debugging and automatic waiting features. Cypress is particularly popular for its developer-friendly API and excellent documentation.

```javascript describe('Sepet İşlemleri', () => { beforeEach(() => { cy.visit('/urunler') })

it('ürünü sepete ekler ve toplamı doğrular', () => { cy.get('[data-testid="product-card"]').first().click() cy.get('[data-testid="add-to-cart"]').click() cy.get('[data-testid="cart-count"]').should('contain', '1') cy.get('[data-testid="cart-icon"]').click() cy.get('[data-testid="cart-total"]').should('contain', '100') })

it('sepetten ürün kaldırır', () => { cy.get('[data-testid="product-card"]').first().click() cy.get('[data-testid="add-to-cart"]').click() cy.get('[data-testid="cart-icon"]').click() cy.get('[data-testid="remove-item"]').click() cy.get('[data-testid="empty-cart"]').should('be.visible') }) }) ```

Mock Stratejileri: Veri Bağımsız Testler

Testlerinizin güvenilirliğini artırmak için veri bağımsız çalışmanız gerekir. Mock'lar, dış bağımlılıkları taklit ederek testlerin tahmin edilebilir olmasını sağlar.

```typescript // API mock'u jest.mock('@/lib/api', () => ({ fetchUsers: jest.fn(), fetchProducts: jest.fn(), }))

// Router mock'u jest.mock('next/router', () => ({ useRouter: () => ({ push: jest.fn(), query: {}, }), })) ```

CI/CD Entegrasyonu

Testlerinizi Continuous Integration sürecine dahil etmek, her kod değişikliğinde otomatik test çalıştırmanızı sağlar. GitHub Actions ile basit bir pipeline oluşturabilirsiniz:

```yaml name: Tests on: [push, pull_request] jobs: test: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: node-version: '20' - run: npm ci - run: npm run lint - run: npm run test - run: npx playwright install --with-deps - run: npx playwright test ```

Pratik İpuçları ve En İyi Uygulamalar

Test yazarken dikkat etmeniz gereken bazı önemli noktalar:

• AAA Pattern (Arrange-Act-Assert): Her testte hazırlık, eylem ve doğrulama adımlarını açıkça ayırın.
• Test isimlendirme: Testlerin neyi doğruladığını açıkça belirten, okunabilir isimler kullanın.
• Tek sorumluluk ilkesi: Her test tek bir davranışı test etsin.
• Test dataları: Her test kendi verisiyle çalışsın, testler birbirine bağımlı olmasın.
• Hız: Birim testleri milisaniye, E2E testleri saniye düzeyinde olmalı.

Sonuç

Next.js projelerinde kapsamlı bir test stratejisi oluşturmak, yazılımınızın kalitesini garanti altına alır. Birim testleri ile bileşenlerin güvenilirliğini, entegrasyon testleri ile sistemler arası iletişimi, E2E testleri ile ise gerçek kullanıcı deneyimini doğrulayabilirsiniz. Doğru araçları seçmek ve test piramidine sadık kalmak, uzun vadede büyük zaman ve maliyet tasarrufu sağlar.