Test Piramidi: Vitest, Entegrasyon ve Playwright E2E

Bu rehberde ne öğreneceksiniz?

Bu yazı bir haber özeti değil; adım adım uygulayabileceğiniz bir öğretici makale (tutorial) formatındadır. Her bölümün sonunda pratik çıkarımlar ve üretim ortamında karşılaşacağınız senaryolar yer alır.

• Unit test ile saf fonksiyon ve mapper'ları doğrulamak
• Integration test ile Prisma + DB katmanını test etmek
• E2E ile kritik kullanıcı yolculuklarını korumak
• Flaky test'leri izole etmek

Ön koşullar

Rehberi verimli takip etmek için aşağıdaki bilgilere aşina olmanız önerilir. Eksik hissettiğiniz konularda ilgili bölümde ek kaynak ipuçları bulacaksınız.

• TypeScript ve async test yazımı
• Temel DOM ve React render kavramı
• CI ortamında test çalıştırma

Güncellik ve teknoloji yığını

Makale 2026 itibarıyla güncellenmiştir. Örnekler ve API referansları şu yığınla uyumludur: Vitest 4.x, Playwright 1.60+, Testing Library, Prisma test DB. Eski sürüm dokümantasyonu ile karıştırmamak için major versiyon farklarını özellikle belirttik.

Framework sürümleri hızla değişir; kalıcı olan prensipler (güvenlik, katman ayrımı, ölçüm) bu rehberin omurgasını oluşturur.

Bölüm 1: Unit test (Vitest)

Saf fonksiyonlar, Zod şemaları, mapper'lar. Mock minimum; logic gerçek kalsın.

Adım adım uygulama

Aşağıdaki sırayı takip edin. Her adımı tamamlamadan bir sonrakine geçmeyin; özellikle güvenlik ve veri katmanı adımları atlanmamalıdır.

1. Vitest config ile @ path alias eşleştirin.
2. Her public util için en az bir happy + edge case yazın.
3. Coverage hedefini %100 değil, kritik path olarak belirleyin.

import { describe, it, expect } from 'vitest';
import { parseTagNames } from '@/lib/blog-taxonomy';

describe('parseTagNames', () => {
  it('lowercases and dedupes', () => {
    expect(parseTagNames('React, typescript, React')).toEqual(['react', 'typescript']);
  });
});

Bölüm 2: Integration test

Test DB (docker postgres veya schema per run). Gerçek Prisma client; mock repository değil.

Dikkat: Testler birbirini etkilemesin; transaction rollback veya truncate stratejisi seçin.

Bölüm 3: Playwright E2E

Login → blog listesi → detay gibi 3-5 kritik flow. Page object pattern ile selector'ları merkezileştirin.

Adım adım uygulama

Aşağıdaki sırayı takip edin. Her adımı tamamlamadan bir sonrakine geçmeyin; özellikle güvenlik ve veri katmanı adımları atlanmamalıdır.

1. e2e/public-pages.spec.ts benzeri spec genişletin.
2. CI'da headless chromium kullanın.
3. Screenshot on failure ile debug süresini kısaltın.

Bölüm 4: Test verisi ve determinism

Flaky E2E genelde zaman ve rastgele veriden kaynaklanır.

Factory ile seed kullanıcı; her test izole DB transaction veya truncate. Playwright storageState ile login tekrarını azaltın.

// vitest.setup.ts — prisma transaction rollback pattern (özet)
beforeEach(async () => await prisma.$executeRaw`BEGIN`);
afterEach(async () => await prisma.$executeRaw`ROLLBACK`);

Sık yapılan hatalar

Aşağıdaki tuzaklar eğitim ortamlarında nadiren, production'da ise pahalıya mal olur. Code review checklist'inize eklemenizi öneririz.

• Implementation detail assert (internal state)
• Her şeyi e2e ile test etmek
• CI'da paralel DB çakışması

Pratik alıştırmalar

Okumak yeterli değildir; öğrenmeyi pekiştirmek için küçük bir side-project veya mevcut kod tabanınızda şu görevleri uygulayın:

1. Yeni bir Zod şeması için validation testleri yazın
2. Blog arama filtresi için bir e2e senaryosu ekleyin

Özet ve sonraki adımlar

Bu rehberdeki prensipleri tek seferde tüm projeye uygulamaya çalışmayın. Önce tek bir route veya modül seçin, ölçün, sonra yaygınlaştırın.

• Contract test (API schema)
• Visual regression (opsiyonel)