01 / 12
Giriş
Frontend test nedir? Hangi araçlar kullanılır?
Frontend test nedir?
Frontend test, kodunuzun kullanıcı arayüzünde doğru çalıştığını otomatik olarak kontrol eder. Test, kodu çalıştırır ve sonucu beklenen sonuçla karşılaştırır. Sonuç farklıysa test başarısız olur.
Test şunları doğrular:
Component doğru render edilir.
Kullanıcı etkileşimleri doğru sonuç verir.
Hata, boş ve yükleniyor durumları doğru görünür.
Neden test yazılır?
Güvenli refactoring. Kodu değiştirdiğinizde mevcut özellikler çalışmaya devam eder.
Hızlı geri bildirim. Hatayı production'a çıkmadan önce bulursunuz.
Kritik akışların güvencesi. Sepete ekleme veya giriş yapma gibi akışlar her zaman çalışır.
Erişilebilirlik ipucu. Testler elemanları role ve label ile bulur. Testin bulamadığı eleman, erişilebilirlik sorununun işareti olabilir. Bu bir erişilebilirlik testinin yerini tutmaz.
Test türleri
| Tür | Ne test eder | Hız | Araç |
|---|---|---|---|
| Unit test | Tek bir fonksiyon veya hook | Çok hızlı | Vitest |
| Component test | Bir component veya küçük bir component grubu | Hızlı | Vitest + React Testing Library |
| E2E test | Gerçek tarayıcıda tüm uygulama | Yavaş | Playwright |
Bu rehber component test konusunu anlatır. Testing Trophy yaklaşımı, yatırımın büyük bölümünü birden fazla parçanın birlikte çalıştığı entegrasyon testlerine yapmayı önerir. Component test bu yaklaşıma uygundur.12
İpucu
Component test gerçek bir tarayıcıda çalışmaz. Layout, CSS ve tarayıcıya özel davranışlar için E2E test kullanın.
Hangi araçlar kullanılır?
Bu rehberde React component'lerini Vitest ve React Testing Library ile test edeceksiniz. Her araç tek bir iş yapar.3
| Araç | Rol | Ne yapar |
|---|---|---|
| Vitest | Test runner | Test dosyalarını bulur ve çalıştırır. describe, it, expect ve mock araçlarını sağlar. |
| jsdom | Test ortamı | Node.js içinde tarayıcı DOM'unu simüle eder. |
| React Testing Library | Render ve sorgu | Component'i render eder (render). Ekrandaki elemanları kullanıcı gibi bulur (screen). |
| user-event | Etkileşim | Tıklama ve yazma gibi kullanıcı hareketlerini simüle eder. |
| jest-dom | Matcher | toBeInTheDocument ve toBeDisabled gibi DOM matcher'ları ekler. |
jsdom gerçek bir tarayıcı değildir. Node.js içinde çalışan bir DOM simülasyonudur.
happy-domaynı işi yapan alternatif bir ortamdır. Bu rehber jsdom kullanır.4Vitest Browser Mode testleri gerçek bir tarayıcıda çalıştırır.5 React için
vitest-browser-reactpaketini kullanırsınız. Sorgularıpage.getByRoleile, doğrulamalarıexpect.elementile yazarsınız.67 Layout ve CSS davranışı test etmeniz gerekiyorsa bu modu değerlendirin.
Neyi test etmeli?
Test edin
Yap
Kullanıcının ekranda gördüğü şeyler.
Kullanıcının yaptığı işlemler (tıklama, yazma, gönderme).
Hata, boş ve yükleniyor durumları.
Test etmeyin
Yapma
Component'in iç state adları ve iç fonksiyonları.
Üçüncü taraf kütüphanelerin kendi davranışı.
CSS görünümü.
Testler yazılımın kullanılış biçimine ne kadar benzerse o kadar güven verir.8
Bu rehberde ne yapacaksınız?
Tüm örnekler bir e-ticaret sayfasından gelir. Küçük bir component ile başlarsınız. Her grupta sayfa büyür.
| Grup | Test edilen parça |
|---|---|
| Başlangıç | Ürün kartı |
| Component Testi | Ürün listesi: yükleme, arama, kupon formu |
| İleri Seviye | Sepet: API, Provider ve hook |
Her grup bir Proje ile biter. Proje, o gruptaki konuları gerçek bir senaryoda tekrar eder.
Kendin dene
Projenizden bir ürün kartı veya benzeri bir component seçin. Kağıda şunları yazın:
Kullanıcının bu component'te gördüğü 2 şey.
Kullanıcının yapabildiği 1 işlem ve beklenen sonucu.
Test etmeyeceğiniz 1 şey.
Son güncelleme tarihi: 14 Ekim 2026