React Native’de Detox ile E2E Test

Selamlar!

Bir yazılım uygulaması geliştirilirken en önemli hususlardan birisi uygulamamızın doğru ve beklenilen şekilde çalışmasıdır. Bu noktada son kullanıcı gözünden testler yazmak uygulamamıza duyduğumuz ve duyacağımız güveni arttırır.

“Peki biz React Native’de bir uygulama geliştirirken bu tarzda testleri nasıl yazabiliriz?” diyorsanız yazımıza başlayalım!

E2E test nedir?

“End to end” test; “uçtan uca test” adı verilen, kullanıcı aksiyonlarının simüle edildiği bir test türüdür. Gerçek veya gerçeğe benzeyen veriler ile uygulama içinde gerçekleşecek akışlar tabiri caizse “taklit edilir”. Uygulamamızı sanki bir kullanıcı kullanıyormuşçasına test ederiz ve ilgili aksiyonların beklenen çıktıları verdiğini kontrol ederiz.

Bir önceki yazımın test bölümünde Unit Test kavramından bahsetmiştim. Unit test yazarken bir Button component’inin nasıl davranması gerektiğini belirleyip çalışabilirliğini doğrulamıştık. Örneğin: "title parametresini doğru şekilde ekrana yansıtabiliyor mu?” ya da “onPress aksiyonunu doğru şekilde tetikliyor mu?” gibi.

Aslında E2E testler de buna benzer şekilde koşul doğrulama ile ilerliyor fakat kapsamı çok daha geniş oluyor. Örneğin:

• Kullanıcı uygulamaya giriş yapabiliyor mu?
• Kullanıcı ürün detay sayfasını görebiliyor mu?
• Kullanıcı hesap bilgilerini güncelleyebiliyor mu?
• Kullanıcı başka bir kullanıcıyı engelleyebiliyor mu?
• Kullanıcı şifresini değiştirebiliyor mu?

tarzında uygulama kapsamında testler olarak düşünebiliriz.

Bu testlerin yazılma amacı uygulama geliştirme sürecinde hem yaptığımız geliştirmelerin doğrulanabilirliği sınamak hem de yapılan bir geliştirmenin uygulamanın başka bir noktasında bir hataya (regresyon hatası) sebep olup olmadığını kontrol altına almaktır.

Genel anlamda; “Uygulama beklenildiği gibi çalışıyor mu?” sorusunun cevabını aramaktır.

Konu anlaşıldı ise React Native’de bu testleri nasıl yazabileceğimize bakalım! 🤘

Detox

Detox; mobil platformlarda E2E test yazmamızı sağlayan bir framework. e2e testleri koşmak için uygulamamızın ayağa kalkması ve bizim test tanımlamalarımızı anlayıp gerçekleyebilmesi gerekir.

Birazdan göreceğiz, “uygulamayı başlat, şu yazıya sahip butona tıkla ve ekranda şu verileri gör” tarzında test koşullarını yazacağız. Bu aksiyonların alınabilmesi için uygulamanın test ortamında ayağa kalkması ve kullanıcı etkileşimlerini (tıklama, yazı girme, ekranı kaydırma) gerçekleştirmesi gerekiyor.

Bu noktada da imdadımıza Detox koşuyor.

Peki biz Detox’u nasıl kuruyoruz?

1) Paket Kurulumu

Ben bu kurulum adımlarını Detox’un bu yazıyı yazarkenki versiyonu olan 20.9.1 için göstereceğim. Adımlar büyük ihtimalle değişmeyecektir ama siz mutlaka dökümanı kontrol edin. [1] [2]

İlk olarak kendimize yeni bir React Native projesi açalım.

npx react-native init detoxApp --version 0.70.5

Not: Ben bu yazıyı yazarken Detox şu anda React Native’in 0.70.x ve 0.71.x arası versiyonlarını desteklemekte. O yüzden ben garanti olması için 0.70.5 versiyonunda bir proje oluşturacağım. Yukarıda da dediğim gibi sizin bu yazıyı okuduğunuz tarihte bu durum değişmiş olabilir, kontrol edersiniz dostlar.

Şimdi detox-cli paketini global olarak kuralım;

yarn global add detox-cli

Not: Paket yöneticisi olarak yarn kullanmıyorsanız bu adımda hata alabilirsiniz. npm ile yüklemek için npm install detox-cli --global komutunu çalıştırabilirsiniz. Fakat ben şahsen yarn ile ilerlemenizi tavsiye ederim. yarn’ı npm install --global yarn komutu ile yükleyebilirsiniz.

Ben yazının devamına yarn ile devam edeceğim. Dökümanda yarn komutlarının npm ve pnpm karşılıkları da bulunmakta, ihtiyaç duyarsanız kontrol edebilirsiniz dostlar. Ama dediğim gibi, yarn kullanın :)

Eğer macOS kullanıcısıysanız Detox’un iOS simülatörlerini yönetebilmesi için şu paketleri de kurmanız gerekmekte;

brew tap wix/brew
brew install applesimutils

Bu iki adım Detox’un ortamınızda çalışabilmesi için gerekli olan adımlar. Her yeni proje kurduğunuzda tekrar tekrar yapmanıza gerek yok. Fakat sonraki adımlar Detox kullanacağınız her projenize eklemeniz gereken adımlar. Bilginiz olsun.

Şimdi;

jest versiyonunu dökümanda talep edilen versiyonla güncelleyelim.

yarn add "jest@^29" --dev

Şimdi ise detox’u projemize yükleyelim.

yarn add detox --dev

Yükledikten sonra projemize detox’u kuralım.

detox init

Bu adımdan sonra Detox, projemize üç tane dosya oluşturacak;

• .detoxrc.js – Detox’un config dosyası.
• e2e/jest.config.js – Detox’un testleri koşabilmek için ihtiyaç duyduğu Jest kütüphanesinin config dosyası.
• e2e/starter.test.js – Örnek bir e2e test dosyası.

MacOS kullanıyorsanız ve iOS ortamına da Detox kuracaksanız ios dizini altına pod install yapmayı da unutmayalım;

cd ios && pod install

2) Test Ayarları

Şimdi gelelim testlerin koşması için gereken ayarları tanımlamaya.

İlk olarak proje dizinimizde yer alan .detoxrc.js dosyasını açalım.

Ezberle ilerlemek istemiyorum, kısaca bu dosyada yer alan alanları açıklayayım:

Bu dosyada dört ana başlık yer alıyor; testRunner, apps, devices ve configurations

• testRunner: Detox testleri koşabilmek için bir test aracına ihtiyaç duyar. Çünkü kendisi sadece kullanıcı etkileşimlerini simüle eden bir araç. Yani beklenen koşulun sağlanıp sağlanmadığını kontrol etmez. Koşulun gerçekleşmesini sağlar. Detox varsayılan olarak jest aracını kabul eder ve benim şahsi tavsiyem de jest ile ilerlemenizdir.
• apps:Uygulamanızın temel olarak iki adet varyasyonu bulunur. debug ve release. Bunlar adından da anlaşılabileceği üzere geliştirme versiyonu ve canlıya çıkılan versiyon olarak kabul edilir. Fakat sizin stage , preprod , alpha ya da beta gibi farklı varyasyonlarınız da olabilir. Onları da bu alana ekleyebilirsiniz.
  Bu alan sizden üç tane değer ister;
  - type: Varyasyon adınız
  - binaryPath: İlgili varyasyonun bulunduğu uygulama dosyası
  - build: İlgili varyasyonu koşacak komut
• devices: Testlerin koşacağı cihazın ayarlarıdır. Varsayılan olarak iOS simülatör iPhone 12 ve Android emülatör Pixel_3a_API_30_x86 gelir. (Güncellenmiş olabilir, kontrol edersiniz.)
• configurations: Testlerde hangi varyasyonların hangi cihaz tipleri ile koşacağının belirlendiği alandır. device ve app olarak iki alan yer alır. device alanı bir üstte bahsettiğim cihaza, app ise ikinci olarak bahsettiğim uygulama varyasyonuna karşılık gelir.

Şimdi gelelim bizim yapacağımız değişikliklere.

İlk olarak apps alanında iOS platformu için ios.debug ve ios.release alanlarında YOUR_APP yazan alanlara kurduğumuz uygulamanın iOS tarafındaki adını yazalım. Eğer siz de benim gibi detoxApp adıyla bir proje kurduysanız o alanları detoxApp olarak değiştirebilirsiniz. Eğer farklı bir proje adınız varsa proje dizininde ios klasörünü açın ve altında yer alan proje adınızı ilgili alana yazın.

Şuna benzer bir diff çıkmalı:

Android tarafı için bu alanda ayrıca bir değişiklik yapmaya gerek yok. Şu şekilde olduğundan emin olun yeter.

Testlerin koşmasını istediğiniz cihazları değiştirmek istiyorsanız ilgili cihazı devices alanına ekleyebilirsiniz.

Cihazınızda kurulu olan
iOS simülatörlerini: xcrun simctl list devicetypes
Android emülatörlerini: emulator -list-avds
komutlarıyla listeleyebilirsiniz.

Ben iPhone 13 ve Pixel_4_API_29 cihazları ile ilerleyeceğim. Fakat sizde farklı cihazlar çıkıyorsa istediğiniz gibi güncelleyebilirsiniz burayı.

3) Android Ek Kurulum Adımları

Android tarafında bazı ek adımlar eklemek gerekli. Biraz uğraştırıcı ama gelin halledelim beraber.

Not: Eğer Android tarafına Detox kurmayacaksanız direkt 4. adıma ilerleyebilirsiniz.

Android tarafında testlerin çalışabilmesi için değiştirmemiz ve eklememiz gereken bazı dosyalar var. İlk olarak ekleyeceğimiz dosyaları halledelim.

Öncelikle DetoxTest.java dosyasını oluşturmamız gerek. Bunun için projemizin Android paket adını öğrenelim. Eğer benimle aynı isimde proje oluşturduysanız bu değer detoxapp olacaktır. Fakat başka bir isimle proje oluşturduysanız bunu android/app/src/main/AndroidManifest.xml dosyasındaki manifest tag’inin içinde yer alan package alanından öğrenebilirsiniz.

Bu görseldeki 2. satırda yer alan package=”com.detoxapp” mevcutta benim oluşturduğum projenin Android paket adı. “com.” kısmını dikkate almayın. Sonraki kısım sizin paket adınız oluyor.

Şimdi DetoxTest.java dosyası için şu dizini projemizde oluşturalım.

android/app/src/androidTest/java/com/detoxapp/DetoxTest.java

UYARI: Sizin paket adınız farklı ise oluşturacağınız dizinde detoxapp yerine kendi paket adınızı koymanız gerek.

Şimdi oluşturduğumuz DetoxTest.java dosyasının içini dolduralım.

package com.detoxapp;

import com.wix.detox.Detox;
import com.wix.detox.config.DetoxConfig;

import org.junit.Rule;
import org.junit.Test;
import org.junit.runner.RunWith;

import androidx.test.ext.junit.runners.AndroidJUnit4;
import androidx.test.filters.LargeTest;
import androidx.test.rule.ActivityTestRule;

@RunWith(AndroidJUnit4.class)
@LargeTest
public class DetoxTest {
    @Rule
    public ActivityTestRule<MainActivity> mActivityRule = new ActivityTestRule<>(MainActivity.class, false, false);

    @Test
    public void runDetoxTests() {
        DetoxConfig detoxConfig = new DetoxConfig();
        detoxConfig.idlePolicyConfig.masterTimeoutSec = 90;
        detoxConfig.idlePolicyConfig.idleResourceTimeoutSec = 60;
        detoxConfig.rnContextLoadTimeoutSec = (BuildConfig.DEBUG ? 180 : 60);

        Detox.runTests(mActivityRule, detoxConfig);
    }
}

UYARI: Sizin paket adınız farklı ise ilk satırdaki detoxapp yerine kendi paket adınızı koymanız gerek.

Şimdi HTTP isteklerinin Detox tarafından da gönderilebilmesi için gereken XML dosyası için şu dizini projemizde oluşturalım.

android/app/src/main/res/xml/network_security_config.xml

Dosya içeriği ise şöyle;

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">10.0.2.2</domain>
        <domain includeSubdomains="true">localhost</domain>
    </domain-config>
</network-security-config>

Oluşturacağımız dosyalar bu kadar. Şimdi ise güncellememiz gereken iki dosya var.

İlk olarak mevcut Kotlin plugin versiyonunu öğrenmemiz gerek. Bu değeri Android Studio üzerinden Preferences > Languages & Frameworks > Kotlin bölümündeki Analyzer version alanından öğrenebiliriz.

Bende görünen değer 1.8.20. Sizde farklı olabilir, kontrol edersiniz.

Sizde bu alan çıkmıyorsa Current Kotlin plugin version kısmından da versiyonunuzu öğrenebilirsiniz. Bende 222–1.8.20-release-AS3739.54 olarak görünüyor. İlk üç hane ve “release” arasındaki değeri alabilirsiniz.

O halde Kotlin versiyonunu öğrendiğimize göre gelelim android/build.gradle dosyasına.

Yapacağımız değişiklikleri diff olarak paylaşıyorum;

Burada dökümanın da dikkat etmemizi söylediği iki nokta var.

• minSdkVersion değerinin 18'den üzeri olması
• dependencies altına eklediğimiz Kotlin plugin’in mevcutta varsa tekrar eklemeyip versiyonunu güncellememiz gerektiği

Bu dosya tamamsa gelelim android/app/build.gradle dosyasına

Buradaki değişiklikleri direkt dökümandaki şeklinde paylaşıyorum.

Android kısmı bu kadar. Biraz yorucu oluyor ama geçmiş olsun :)

Bu kısımda yaptığımız değişiklikler ile ilgili commit linkini paylaşayım, eksik bir noktanız olursa teyit edebilirsiniz. (Paket adı noktasını unutmayın dostlar :) )

Added Detox native Android implementation · ezranbayantemur/medium-e2e@25125ae

4) Build & Test

Şimdi ise ilk Detox testimizi koşalım.

Detox, bizim yarn ios ve yarn android komutlarıyla otomatik olarak oluşturduğumuz build dosyalarından farklı bir build dosyasına ihtiyaç duyar.

Detox’un kendi build dosyasını oluşturması için aşağıdaki komutları sırasıyla çalıştıralım;

detox build --configuration ios.sim.debug

detox build --configuration android.emu.debug

Bu adımda Metro Bundler terminalimiz ayağa kalkacak. Onu kapatmayalım. Testlerimiz koşarken açık kalması gerekli.

Eğer her iki platformda da BUILD SUCCEEDED mesajını görüyorsak artık ilk testimizi koşabiliriz.

iOS tarafında testlerimizi koşmak için aşağıdaki komutu;

detox test --configuration ios.sim.debug

Android platformu için aşağıdaki komutu çalıştırabilirsiniz.

detox test --configuration android.emu.debug

Bu noktada ilgili platformda ayarladığımız cihaz ayağa kalkacak ve testleri koşacak.

Projedeki tek E2E test dosyası detox’un örnek olarak koyduğu test dosyası olduğu için elbette fail olacak. Ama sonuç olarak e2e ortamımız kuruldu ve artık istediğimiz gibi testlerimizi yazabileceğiz :)

Not: Detox komutlarını çalıştırırken kolaylık olsun diye komutları package.json da yer alan scripts alanına ekleyebiliriz. Bunun için şu değişikliği yapabilirsiniz;

Bu adımdan sonra yarn e2e-ios veya yarn e2e-android derseniz testleri, yarn e2e-ios-build veya yarn e2e-android-build derseniz de build alma işlemini hızlıca koşturabilirsiniz.

Not: Build alma komutlarını yanlızca native tarafta bir değişiklik yaptıysanız çalıştırın. Her seferinde build komutunu koşmanıza gerek yok. Örneğin kamera ya da takvim kütüphanesi eklediyseniz bu değişikliklerin detox’a yansıması için her iki platformda da build komutlarını çalıştırmalısınız. Ama uygulamaya yeni bir sayfa ya da yeni bir akış eklediyseniz build almanıza gerek yok.

Ek olarak ben E2E testlerin ilgili sayfa dizininde olmasını tercih ediyorum. Detox kurulduğunda E2E testleri proje dizininde yer alan e2e klasörü altında yer alacak şekilde kurulu gelir. Bunu değiştirmek için e2e/jest.config.js dosyasında şu değişikliği yapabilirsiniz:

Bu değişikliğin bize sağladığı bir diğer avantaj da unit testler ve E2E testlerin dosya uzantısı olarak birbirinden ayrılacak olması.

Yani herhangi bir unit test:

• Button.test.tsx

Herhangi bir e2e ise:

• ProductScreen.e2e.test.ts

şeklinde yer almış olacak.

Ben ekran dosyalarını pages adı altında bir klasörde saklayacağım için ilgili değişiklikte src/pages adında bir isimlendirme yer alıyor. Eğer siz farklı bir isimlendirme yapacaksanız farklı bir dizin ismi verebilirsiniz.

Ek olarak ben testleri Typescript dilinde yazacağım için .ts uzantısı verdim. Siz Javascript dilinde yazacaksanız .js uzantısını kullanabilirsiniz.

Proje: News 📰

Testleri yazacağımız örnek proje basit bir haber okuma uygulaması olacak. Denemek isterseniz diye repo linkini sizinle paylaşacağım. Uygulamayı basit tuttum çünkü ana odak noktamız e2e konusu ve temel olarak nasıl ilerleyebiliriz onu görmek.

Yukarıda görebileceğiniz üzere ana sayfa, haber detayı ve yorumlar sayfası bulunmakta. Haber detayından yazarın profiline gidilmekte ve yorum sayfasında da akışa ek olarak yorum beğenme ve yorum yapma özelliği bulunuyor.

Not: Projenin test yazılmamış halini incelemek ve kendiniz üzerine test yazmak isterseniz, proje reposunda without-test branch’ine bakabilirsiniz.

Link: https://github.com/ezranbayantemur/medium-e2e/tree/without-test

Bu arada;

E2E testleri koştururken çalışacağımız endpoint adresleri uygulamamızın gerçekte çalıştığı endpoint adreslerinden farklı olacak. Çünkü testler için çalışacağımız verileri manipüle etmek isteyebiliriz ya da sağlıklı gelmeyen bir veride beklenildiği gibi mi çalışıyor bunu test etmek isteyebiliriz.

Endüstriyel standartlarda bu tarz durumlar için ayrı bir test API’ı yazılabiliyor fakat biz bu seferlik localimizde koşacak bir json-server ile çalışacağız. Ben gerekli yapıyı reponun içerisine yerleştirdim. Fakat uygulama debug veya release alırken gerçek server ile, test koşarken ise kendi oluşturduğumuz mock server ile çalışmasını sağlamak için ufak bir ayar daha eklememiz gerekli.

Projemize uygulamamızın gerçekte kullanacağı endpoint adreslerini alacağı bir JS dosyası oluşturuyor ve içine kullanacağımız endpoint adreslerini ekliyoruz. Aynı şekilde .mock.js şeklinde bir dosya daha oluşturup bu dosyaya da testler sırasında çağırılacak endpoint adreslerini koyuyoruz. Ben projeye config.js ve config.mock.js şeklinde dosyaları oluştrudum.

Not: Android emülatörü VM (virtual machine) olarak çalıştığı için localhost değerini VM’in localhost’u olarak kabul eder. O yüzden API’ya erişemeyecektir. 10.0.2.2 değeri bilgisayarımızın kendi servis adresidir. Android için bu değeri girmemiz gerekli. Genymotion için 10.0.3.2 kullanabilirsiniz.

İlgili link

Testleri ayağa kaldırırken bu değişiklikleri algılayabilmesi içinde metro.config.js dosyasına şu değişiklikleri uyguluyalım.

Bu sayede artık yarn start dediğimizde gerçek veriler ile, MY_APP_MODE=mocked yarn start dediğimizde de test verileri ile ayağa kalkmış olacak.

Şimdi gelin uygulamamızın kabaca akışını çıkartalım.

• Kullanıcıyı ilk olarak ana sayfa ile karşılıyoruz. Bu sayfada kullanıcı haberlerden oluşan liste görüyor ve scroll edip en son habere kadar görebiliyor. Kullanıcı haberler içinde arama yapabiliyor ve haberler kullanıcının arama yaptığı kelimeye göre filtrelenebiliyor. Eğer aramaya göre herhangi haber bulunmaz ise ekranda bulunamadı uyarısı beliriyor. Kullanıcı herhangi bir habere tıklarsa da haberin detayına gidebiliyor.
• Haber detay sayfasında kullanıcı haberin detay bilgilerini ve iki adet buton görüyor. Yazarı görüntüleme ve yorumları görüntüleme butonları.
• Kullanıcı yazarı görüntülemeye basar ise haber yazarının detay bilgilerini görüntüleyebiliyor.
• Eğer yorumları görüntüle derse de habere yapılan yorumları görebileceği sayfaya yönlendiriliyor. Burada kullanıcı isterse herhangi bir yorumu beğenebiliyor ve yorum ekleyebiliyor.

Çıkardığımız akışlara göre testlerimizi yazmaya başlayabiliriz!

İlk E2E Testimiz 🧪

İlk testimizi açılış sayfasına yazacağız. Akışı çıkardığımıza göre test edeceğimiz aksiyonlarımız belli:

• Kullanıcı sayfayı açar, haber içeriklerini görüntüler
• Kullanıcı sayfanın en altına kadar inebilir ve içerikleri görüntüleyebilir.
• Kullanıcı haberleri içerisinde arama yapar, aramaya göre sonuçlar filtrelenir
• Arama sonucu çıkmazsa uyarı metnini görüntüler.

Şimdi bunları koda dökelim.

Ve test kodlarımız tamam!

Kodları kısaca inceleyecek olursak;

• device en üstteki importtan göreceğiniz üzere detox’un kendisinden geliyor. Bu değer ile testi koşan cihaza erişebiliyor ve ihtiyaç duyduğumuz işlemleri gerçekleştirebiliyoruz. Detox bu noktada oldukça cömert davranmış. Screenshot almaktan orientation değerini değiştirmeye, URL linki açmaktan FaceID eşleştirmeye kadar bir çok fonksiyonu gerçekleştirebiliyorsunuz. Merak ettiyseniz bu link üzerinden inceleyebilirsiniz.
• element fonksiyonu ekranda gösterilen UI elementlerine erişmemize olanak sağlıyor. Eriştikten sonra da ihtiyaç duyduğumuz aksiyonları gerçekleştirebiliyoruz. Örneğin 20. satırda scrollTo ile listeyi herhangi bir yöne kaydırmak ya da 29. satırda typeText ile input’a değer girmek gibi.
• by objesi ise o elemente nasıl erişebileceğimizi seçmemize olanak sağlıyor. Elementlerimize testID ya da text gibi değerler ile erişebiliyoruz.

Buradaki test caselerinde de yaptığımız şey aslında Detox API’leri ile daha öncesinde çıkarttığımız akışları simüle etmek. İlk test case’mizde açılışta haber kartlarının ekrana geldiğini kontrol ettik. 1 ve 7 yazmasının sebebi test verileri ile çalışınca ekrana 7 adet kartın sığıyor olması. Aynı şekilde ikinci test durumunda da son 7 verinin ekranda var olmasını kontrol ettik. (Bu değerler test edeceğiniz cihazda farklı olabilir. Küçük ekranlı cihazlarda daha az sayıda gözükebilir. Dikkat etmeniz gerekir.)

Ek olarak arama çubuğunda herhangi bir değer yazıldığında eğer değer bulunursa ekrana gelmesini, bulunamaz ise uyarı metninin doğru bir şekilde ekrana basılmasını kontrol ettik.

E2E testler unit testlerden farklı olsa da kod bazında birbirine çok benziyor fakat burada ağırlık verilen nokta testID değerlerinden ziyade direkt olarak ekrana basılan metin değerleriyle, kullanıcının gerçekte göreceği değerler ile çalışmak. Örneğin 28. ve 29. satırlar hariç geri kalan her element text değerlerine göre erişilmiş.

Çünkü kullanıcının uygulamayı kullanırken göreceği şeyler testID değil, direkt olacak verinin kendisi olacak. Evet, bazı elementlere yalnızca testID değerleri ile ulaşabiliyoruz, bu kaçınılmaz bir şey. Fakat test yazarken imkan olduğunca kullanıcının gerçekte göreceği şekilde elementlere erişmeliyiz. Örneğin, ekranda “Kayıt Ol” butonu varsa; bu butona by.id(“sign-up-button”) yerine by.text(“Kayıt Ol”) şeklinde erişmemiz çok daha sağlıklı olacaktır. Çünkü ilgili metnin yazılmaması, değişmesi veya ekranda okunamıyor olması durumunu testID ile erişirsek yakalayamayız. Yukarıda da dediğimiz gibi, kullanıcı testID ile değil, metni okuyarak butona basacaktır.

O yüzden test yazarken buna dikkat edelim dostlar 🤜🤛

Peki, testimizi yazdığımıza göre sıra geldi onu koşturmaya. Öncelikle demin yukarıda bahsettiğimiz json-server’ımızı ayağa kaldıralım. Ben proje dizininde test-server klasörü altına gerekli dosyaları oluşturdum. O yüzden testten evvel bu dizindeki server.js dosyasını çalıştıralım. (Normalde daha önce de dediğim gibi bu tarz bir yöntem yerine test endpoint adresleri ile çalışılır.)

cd test-server && node server.js

Sonrasında da metro bundler’ımızı test ortamına bakacak şekilde ayağa kaldıralım;

MY_APP_MODE=mocked yarn start

Son olarak da testlerimizi çalıştıralım!

yarn e2e-ios
yarn e2e-android

Ve Detox ile ilk E2E testimizi yazdık!

Uygulamanın geri kalanına da testlerimizi eklememiz gerek fakat hepsini burada yazıya döküp uzun uzadıya anlatıp sizi boğmak istemiyorum. Tüm testleri yazıp repoya göndereceğim. Merak ettiğiniz akışların testini inceleyebilirsiniz. Zaten genel mantığı ve çerçevesini beraber inceledik, diğer taraflarda da temel olarak değişen bir durum yok.

Projenin linkini de tekrardan paylaşayım:

GitHub - ezranbayantemur/medium-e2e: An E2E implement project, created for Medium article

Yazıyı buraya kadar okuduysanız alırım Github’da bir yıldızınızı ⭐️

Sonuç

Bu yazımız biraz uzun oldu fakat React Native ile E2E test yazarken Detox ile nasıl kurulum yaparız, testlerimizi gerçekleştiririz görmüş olduk.

Yazıda da bahsettiğim gibi; projemizde E2E testlerin olması projenin hem güvenilirliğini yükselten (rahatça geliştirme ekleyebilme) hem de test maliyetini düşüren (irili ufaklı her bir geliştirmede tekrar tekrar test etme) oldukça faydalı bir olgu.

Bu bağlamda Detox, React Native tarafı için tercih edilebilecek güzel bir araç.

Umarım bu yazı da sizlere hem E2E testinin önemini, hem de Detox paketinin nasıl kullanabileceğinizi keyifli bir şekilde anlatabilmişimdir.

Beğendiyseniz, alkışınızı alırım :)

Güzel günler, keyifli kodlamalar dilerim dostlar! 🫡

🎵

“Perl: The only language that looks the same before and after RSA encryption.”