Pazartesi 20 Mart 2023
Hakkında
Yazarlarımız
Reklam
Künye
İletişim
Webmaster.Kitchen – Türkiye'nin Webmaster MutfağıWebmaster.Kitchen – Türkiye'nin Webmaster Mutfağı

Bülten

Sosyal Medya Yasası Kabul Edildi

Binance ‘e Siber Saldırı

Webmaster.Kitchen – Türkiye'nin Webmaster MutfağıWebmaster.Kitchen – Türkiye'nin Webmaster Mutfağı
  • BAŞLARKEN
    • KOD
      • PHP
      • Asp.Net
      • Swift
      • MySQL
      • CMS
  • TASARIM
    • İpuçları
    • Çizim
    • Illustrator
    • Photoshop
    • Trendler
  • ARAYÜZ
    • JavaScript
    • HTML5
    • CSS
    • REACT
  • İPUÇLARI
    • API
    • Güvenlik
    • IDE
    • Framework
    • OS
    • Verimlilik
    • İçerik
      • Dökümantasyon
      • İpuçları
      • Nasıl Oluşturulur?
  • KAYNAKLAR
    • Tasarım
    • Kod
    • İş
  • GİRİŞİM
    • Finans
    • Girişimci
    • Nasıl yapılır?
  • ARAÇLAR
  1. Anasayfa
  2. Güncel
  3. Jest Kullanarak React Native Nasıl Test Edilir?
 Jest Kullanarak React Native Nasıl Test Edilir?
Güncel İpuçları Yazılım

Jest Kullanarak React Native Nasıl Test Edilir?

Yazar : Sevim Selin Özsoy 13 Nisan 2022 0 Comment

İçindekiler

  • Uygulamayı Test Etmek Neden Önemli?

  • React Native Uygulamaya Jest’i Eklemek

    • Başlangıç Olarak

  • İlk Testi Yazmak

React Native ile geliştirme yaparken, cli’ın Jest isimli bir dependency’i default projeme eklediği dikkatimi çekti. Bunun üzerine “Jest neymiş?” diye araştırmaya koyuldum.

A Jester Juggling React Icons

Jest, kısaca Facebook tarafından geliştirilen bir JavaScript test framework’ü. Babel, TypeScript, Node, React, Angular, Vue gibi JavaScript frameworklerini Jester kullanarak test edebiliyorsunuz.

Uygulamayı Test Etmek Neden Önemli?

Genellikle yazılım geliştirilirken, ister web ister mobil olsun test aşaması, en son akla gelen basamak olur. Bir mobil uygulama geliştirdiğinizi varsayalım. Aklınızda uygulamanın yaklaşık olarak bütün gereksinimlerini belirlediniz, arayüzü hakkında kafa yordunuz. “Bu butona basınca, şu component’a yönlendirsin. Bu component giriş sayfası olsun verileri şimdilik veri tabanına aktarmayayım” gibi bir planınız var. İlk bakışta, kısaca anlatıldığını düşünürsek gayet mantıklı bir plan; hatta bir takım içinde çalışıyorsanız iş bölümü bile yapabilirsiniz bu plan ile. Uygulamanızı geliştirdiniz, store’a sürdünüz. Her şey çok güzel gidiyordu taaaa ki, uygulamanız patlayana kadar. O zamana kadar uygulamanıza birçok özellik eklemesi de yaptığınızı varsayarsak elinizde belki binlerce satır kod var ama uygulamanın nerden sorun çıkarttığını belirleyeceğiniz hiç test kodunuz yok!

Bu noktada, test kodlarını yazmak için gerekli motivasyonu toplamanız biraz zor olabilir. Uygulamanın özelliklerini kullanılan teknolojiyi göz önünde bulundurarak özel ve genel testler yazmanız gerekecek çünkü :/ Neyse ki Jest, bu süreci daha dayanılabilir hale getiriyor. Bu yazıyla ayağımızı biraz testing alanının içine sokacağız; Jest için küçük, yazılımcılar için büyük bir adım!

React Native Uygulamaya Jest’i Eklemek

React Native’in 0.38 veya daha yüksek versiyonunu kullanıyor iseniz, cli ile bir uygulama oluşturduğunuzda Jester projenize otomatik olarak ekleniyor. Bu sebeple herhangi bir yapılandırma yapmanıza da ihtiyaç kalmıyor. Tek yapmanız gereken terminale react-native-init yazıp arkanıza yaslanmak!

Başlangıç Olarak

react-native-init komutu bizim için jest, babel-jest ve react-test-renderer olmak üzere 3 temel kütüphane yüklüyor. Yükleme doğru olmuş mu diye kontrol etmek isterseniz, package.json dosyanızda aşağıdaki bağımlılıkların ve scriptlerin olması gerekir.

Dosyanız tam ise artık, cmd’den npm test yazarak, testing aşamasına geçebiliriz!

İlk Testi Yazmak

Testlerinizi projenizin ana dizininde bulunan App-test.js isimli dosyaya yazmalısınız.

Jest sizin için basit bir test fonksiyonunu default olarak oluşturmuş oluyor.

Normal şartlarda, App component’ını importladığınız kısımda ‘../App’ yazmalı, fakat siz de ana component’ı benim gibi src dosyasının veya başka bir dosyanın içinde görmeyi seviyorsanız, component’ın path’ini değiştirmelisiniz.

Şimdi Jest’in harika özelliklerinden olan Snapshot ile, geliştirdiğinizi varsaydığımız hayali uygulamanın giriş ekranı için basit bir test yazalım.

Snapshot’tan kısaca bahsetmek gerekirse; UI öğelerin test edilmesi diyebiliriz. Tasarladığınız UI öğrenin test esnasında ekran görünütüsü alınır ve çalıştıracağınız sonraki testlerde bu ekran görüntüleri karşılaştırılır. Eğer karşılaştırılan iki ekran görüntüsü birbiriyle eşleşmez ise, test fail sonucu döndürür.

Sadece bu dosyayı test etmek için npm test Giris-sayfa-test komutunu çalıştırmalısınız. Bütün test dosyalarını aynı anda çalıştırmak istiyorsanız npm test komutunu çalıştırmanız yeterli olacaktır.

Bundan sonraki yazımızda, daha karmaşık componentları test etmek için kullanılan Enzyme ve birbirine bağlı componentları sahte stateler kullanarak test etmekten bahsedeceğiz. Bu yazımızda, jest adına temel bilgiler vermeye çalıştık. Umarım yararlı olmuştur ve okurken keyif almışsınızdır! Yazının bir sonraki bölümünde görüşmek üzere, iyi kodlamalar!

Etiketler: jest react native uygualama testi yazılım testi
Önceki Yazı
Sonraki Yazı

Sevim Selin Özsoy

editor

Süleyman Demirel Üniversitesi 4. sınıf bilgisayar mühendisliği öğrencisiyim. Front-end yazılımla ve tasarımla ilgileniyorum. Aktif olarak Süleyman Demirel Üniversitesinin bilgi işlemde part-time yazılımcı ve tasarımcı olarak çalışıyorum. Aynı zamanda da Webmaster Kitchen'da sosyal medya yöneticiliğini ve tasarımcılığını yapıyorum.

Yorum Yap Yorumu İptal Et.

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Taze Yazılar
Güncel

Sosyal Medya Yasası Kabul Edildi

14 Ekim 2022
Blockchain

Binance ‘e Siber Saldırı

8 Ekim 2022
Blockchain

Binance ‘den Ücretsiz Eğitim

5 Ekim 2022
Güncel

Japonya için Yenilenen Corolla

4 Ekim 2022
© 2021 Webmaster Kitchen. Tüm Hakları Saklıdır.