Merhaba, bu yazıda temel anlamda unit testing nedir; hangi fonksiyonlara test yazılır; bir react uygulamasında jest kullanılarak unit testing ve snapshot testing nasıl yapılır gibi konulardan bahsedeceğim.
Yukarıdaki görselde de göründüğü üzere unit testler test yazmak için bizim başlangıç noktamızdır. Integration testleriyle birbirinden farklı olan birimlerin bir araya gelmesiyle oluşan yapının doğru bir şekilde çalışıp çalışmadığı test edilir. End to End testler ise son kullanıcı gibi davranarak sistemin tümünün kontrol edildiği aşamayı oluşturur.
Unit Test
Biraz unit testing’den bahsedecek olursak; unit testing bir yazılımda bulunan, en ufak kod bloklarının test edilmesidir. Unit testler o kod bloğundaki hatayı bulmak için değildir. Her unit test yalnızca bir yeri test etmelidir. İyi yazılmış unit testler aynı zamanda bir dökümantasyon özelliği görerek sonraki geliştiricilerin projeye dahil olma sürecini kolaylaştırır. Bir fonksiyonun test edilebilir bir fonksiyon olması için temelde pure function özelliklerini sağlaması gerekmektedir. Peki bir fonksiyonun pure function olup olmadığını nasıl anlarız?
Pure Functions
Pure fonksiyonlar yapıları gereği çok kolay test edilebilen fonksiyonlardır. Pure fonksiyonlar en az bir parametre alır ve daima bir değer veya bir fonksiyon return eder. Aynı zamanda, uygulamada bulunan herhangi bir değişkenin değerini değiştirmezler. Eğer bir fonksiyon direkt olarak DOM’da değişiklik yapıyorsa bu fonksiyona da pure bir fonksiyon diyemeyiz.
Şimdi adım adım pure olmayan bir fonksiyon nasıl pure fonksiyon haline getirebilir ona bakalım.
Yukarıda selfEducate fonksiyonu pure bir fonksiyon değildir. Çünkü fonksiyon parametre almıyor ve uygulamadaki isa nesnesinin değerlerini mutate ediyor yani değiştiriyor. Şimdi diğer adıma bakalım.
selfEducate fonksiyonu hala pure bir fonksiyon değil. Çünkü fonksiyon kendisine parametre olarak değer gönderilip ona bağlı bir sonuç return etse de isa nesnesinin değerlerini değiştiriyor. Şimdi son adıma bakalım.
Sonunda selfEducate fonksiyonu pure bir fonksiyon haline geldi. Burada, kendisine parametre olarak gönderilen objenin bir kopyasını alarak yeni bir nesne oluşturdu, oluşturulan yeni nesnenin değerlerini değiştirerek return etti. Böylelikle application state’de bulunan isa nesnesinin değerlerini değiştirmedi.
Pure fonksiyonları öğrendikten sonra şimdi aşağıdaki fonksiyonlar ve onların testlerini inceleyelim.
Jest ile kullanılan, beklenen ve alınan sonuçları karşılaştıran tüm metotları incelemek buraya tıklayabilirsiniz.
Aşağıdaki örnekte kendisine parametre olarak gönderilen arrayi küçükten büyüğe sıralayan ve aynı elemanları diziden çıkarıp yeni bir array olarak return eden fonksiyonu ve testini yazdık.
Aşağıdaki örnekte ise .each metodunu kullanarak palindrome olup olmadığını test etmek istediğim kelimeleri bir array olarak isPalindrome fonksiyonuna gönderip test ettik.
Yukarıdaki fonksiyonların Jest ile test edilen sonuçları bize aşağıdaki gibi bir ekran görüntüsünü oluşturdu.
CodeSandbox linkine gitmek için buraya tıklayabilirsiniz.
Snapshot Test
React componentlerinde bir değişiklik olup olmadığını test etmek açısından snapshot testleri yapılır. Snapshot testlerinde jest bizim için componentin bir ekran görüntüsünü JSON formatında .snap uzantısıyla snapshots klasörü oluşturup onun altına ekler. Ardından testi yeniden çalıştırdığımızda yeni bir ekran görüntüsü alıp eskisiyle diff eder. Eğer componentte bir değişiklik varsa mesela bir props değişmişse testi fail eder.
Aşağıdaki sırasıyla bir react componenti, ardından bu componentin snapshot testini yapan test kısmını ve son olarak Jest’in aldığı componentin ekran çıktısını göreceğiz.
Şimdi componentte bir değişiklik yaparak LOGIN textini LOGIN BUTTON olarak değiştirelim.
Eğer gerçekten de LOGIN textini LOGIN BUTTON olarak değiştirmek isterseniz jest — updateSnapshot komutunu çalıştırabilirsiniz.
Umarım faydalı bir yazı olmuştur. Eksiklik veya hatalı olduğunu düşündüğünüz kısımları benimle paylaşırsanız çok mutlu olurum. :)
