Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan React ve React Native uygulamalarında unit testing teknikleri hakkında kapsamlı bir eğitim içeriğidir.
- Video, unit testing'in temel kavramlarından başlayarak, React'te bir label komponenti oluşturma ve test etme sürecini adım adım göstermektedir. Daha sonra React Native'de test render ve create fonksiyonlarının kullanımı, find by type, find all by type gibi fonksiyonlar ve expect item, to eq gibi test beklentileri anlatılmaktadır. Son bölümde ise debugger kullanımı, snapshot testing ve event testing gibi ileri seviye teknikler ele alınmaktadır.
- Eğitim boyunca kod yazarak ve test sonuçlarını inceleyerek, React ve React Native uygulamalarında test yazma sürecini pratik bir şekilde açıklamaktadır. Özellikle DOM yapısı üzerinden test etme yöntemleri, snapshot dosyalarının nasıl oluşturulup kontrol edilebileceği ve buton gibi bileşenlerin eventlerinin nasıl test edilebileceği gibi konular detaylı olarak gösterilmektedir.
- 00:12React Komponenti Oluşturma
- Unit testing konusunda sınıflar ve kodların nasıl test edileceği hakkında konuşuldu.
- React'te native komponentler için "import" ve "export function" kullanılarak "Label" adında bir komponent oluşturuldu.
- Komponente CSS stilleri için "StyleSheet" kullanılarak font size, font weight ve minimum boyut gibi özellikler eklendi.
- 05:40Komponenti Test Etme
- Komponentin unit testi için "src" klasörünün altında "test" klasörü oluşturuldu ve aynı isimde "Label.test.js" dosyası yazıldı.
- Test dosyasında "describe" blokları kullanılarak testlerin ne olduğu belirtildi.
- "react-test" kütüphanesi kullanılarak komponentin render edilip edilmediği test edildi.
- 08:02React Test Render İşlemi
- "react-test" kütüphanesinin "render" fonksiyonu, React'ın gerçek planda bileşenlere çevirmeden önce yaptığı rendering işlemini sanal olarak işletiyor.
- Test çalıştırıldığında üç test başarılı oldu, bunlardan biri "app" testi, diğeri "iteration" testi ve üçüncüsü "label" testi.
- Debug tools kullanılarak render edilen komponentin DOM yapısı incelendi ve props, style ve text gibi özellikleri kontrol edildi.
- 12:06React Native Unit Testleri ve Çıldır Kavramı
- React Native'de "çıldır" kavramı, bir bileşenin içindeki eleman sayısını ifade eder; tek eleman varsa objenin kendisi, birden fazla eleman varsa bir array olarak döner.
- Test render create fonksiyonu, React Native'in kendi sitesindeki test sekmesinde belirtilen bir obje döndürür.
- Test render, gerçek DOM olmadan veya sınıfları sanal bir şekilde render etmeye yarayan bir kütüphanedir.
- 15:56Test Render Kullanımı ve Özellikleri
- Test render create ile bileşen oluşturulur ve root elemanı obje olarak içeride var olur.
- Root elemanın içerisinde find by type ile herhangi bir eleman aranabilir ve o bulunan elemanın içerisindeki propertilere bakılabilir.
- Test render, DOM structure'ını birebir test eder ve bileşenin ilk root bileşeninin view olup olmadığı, style'ı gibi özellikleri kontrol eder.
- 17:03Style Özelliklerinin Test Edilmesi
- Style özelliğinin test edilmesi için component should render text root ve root text item has style şeklinde testler yazılabilir.
- To JSON fonksiyonu kullanılarak elemanın propertileri JSON formatında ekrana yazdırılabilir.
- Testler success ede ede ilerleyerek bileşenin propertileri kontrol edilebilir.
- 19:32Birden Fazla Eleman İçeren Bileşenlerin Test Edilmesi
- Birden fazla eleman içeren bileşenlerin test edilmesi için farklı testler yazılabilir.
- Find by type fonksiyonu, root içerisindeki ilk belirtilen tipi bulur ve iki tane varsa fail verir.
- Find all by type fonksiyonu ise array döndürür ve birden fazla eleman varsa da fail verir.
- 25:01Component Türlerinin Test Edilmesi
- Component türlerinin test edilmesi için type parametresi kullanılır.
- Bazı durumlarda doğrudan type'dan değil, type display name'den bakmak gerekebilir.
- Root eleman ve içindeki elemanların eşitliği test edilirken, küçük çapta farklılıklar göz önünde bulundurulmalıdır.
- 29:12Debugger Kullanımı ve DOM İncelemesi
- Debugger kullanarak DOM'daki devasa objeleri incelemek için en yukarıdan başlamak gerekiyor.
- Debugger ile "type" değerini bulmak için "type" özelliğini kullanarak objeleri inceleyebilirsiniz.
- DOM'daki "text" bileşeninin içerisine giderek "view" ve "dom" yapısını inceleyebilirsiniz.
- 31:36Snapshot Testing
- Snapshot testing, kompleks objeler için doğrulama yapmak için kullanılan bir yöntemdir.
- "matchSnapshot" özelliği ile render edilmiş çıktının DOM'daki snapshot'ını alabilirsiniz.
- İlk çalıştırıldığında snapshot dosyası oluşturulur ve DOM yapısı birebir test edilir.
- 33:35Snapshot Testinin Çalışma Prensibi
- Snapshot test, DOM'un yapısını, view'ları, style'ları ve tüm özelliklerini birebir test eder.
- Snapshot dosyası, DOM'un memory dump'ını alarak obje olarak çıkarır.
- DOM yapısı değiştiğinde, snapshot dosyası silindiğinde veya yeni bir snapshot alındığında test fail eder.
- 36:17Event Testing
- Props'teki "onPress" gibi event'leri test etmek için "should fire given onPress function" kullanılabilir.
- Event'in çalışıp çalışmadığını kontrol etmek için "ledExecuted" gibi değişkenler kullanılabilir.
- Breakpoint kullanarak event'in tetiklendiğinde kodun hangi noktada durduğunu görebilirsiniz.