🧩 Component Testing

Component Testing: Component Testing, bir React bileşenini gerçek bir tarayıcıda — ama tüm uygulamayı başlatmadan — izole olarak çalıştırmaktır: tıpkı bir uçak motorunu test pist

Component Testing, bir React bileşenini gerçek bir tarayıcıda — ama tüm uygulamayı başlatmadan — izole olarak çalıştırmaktır: tıpkı bir uçak motorunu test pistine çekmeden önce fabrika tezgahına bağlayıp tek başına çalıştırman gibi — pist, gövde, yakıt sistemi, pilot kabini hiçbiri gerekmez, yalnızca motorun kendi parametreleri içinde doğru çalışıp çalışmadığına bakarsın. Peki E2E testleri zaten tarayıcıda çalışıyorken neden ayrı bir Component Testing altyapısına ihtiyaç var? Çünkü bir bileşenin edge case'lerini (hata durumu, boş state, erişilebilirlik) E2E akışı üzerinden tetiklemek çok pahalıdır — 3 sayfalık bir login akışı geçmeden "ödeme butonu disabled iken tooltip gösteriyor mu?" sorusunu soramazsın. Java'da Spring'te @WebMvcTest yalnızca MVC katmanını başlatır, servis ve repository bean'lerini mocklar — Component Testing de bileşenin Spring'i gibidir: sadece o katmanı başlatıp yüksek hızda test edersin. QA için kritik risk: jsdom tabanlı unit testler (Jest + RTL) gerçek tarayıcı DOM'unu çalıştırmaz, CSS/layout/scroll sorunlarını göremez; Component Testing ise Chromium içinde koştuğu için o sınıf görsel hataları da yakalar — E2E'ye geç kalınmadan önce bir filtre görevi görür.

cy.mount() komutu, component'i gerçek bir tarayıcıda (jsdom gibi sahte bir DOM'da değil) render eder. Bu yüzden Cypress dokümantasyonunun da belirttiği gibi, "component'leri kullanıcıların göreceği şekilde test edersin" — render gerçek, retry-ability ve auto-wait built-in, waitFor() veya act() yazmana gerek yoktur.

cy.mount() — React Counter Örneği

Micro Lab: Cypress — Assertion yazma

TODO satirini beklenen cozumdeki kritik satirla degistir. Bu gercek runtime degil; amac dogru yapinin yazilmasini kontrollu olarak pekistirmek.

Adim Adim: Cypress — Assertion yazma

Neyi dogrulayacagini belirle: gorunurluk / metin / CSS / attribute

.should("be.visible") ile elementin gorunur oldugunu dogrula

.should("contain.text", "Giris Basarili") ile metin içeriğini kontrol et

.should("have.attr", "disabled") veya "href" ile attribute dogrula

Test fail ettiginde Cypress hata mesajini oku: expected X to ... but got Y

Cypress assertion yazma ve dogrulama sirasi nedir?

Mockito'da @Mock ile dış bağımlılıkları (PaymentGateway) sahteleştirip sadece CartService'i izole edersin — tüm Spring context'ini ayağa kaldırmadan. cy.mount() de aynı felsefeyle, tüm React/Vue uygulamasını açmadan tek bir component'i izole eder.

Component Testing, E2E testlerin YERİNE geçmez — ikisi birbirini tamamlar: component testleri hızlı/izole birim doğrulaması, E2E testleri gerçek kullanıcı akışı doğrulaması yapar.