Jest Kullanarak React.Js Unit Test Yazmak

Anlatacaklarıma başlamadan önce biraz Jest’e değinmek istiyorum.

Jest facebook firmasının geliştirmiş olduğu bir Javascript test kütüphanesidir. React kodunu test etmek için kullanılmasının yanında herhangi bir Javascript kodunu test etmek içinde kullanılabilir.

Jest kullanarak fonksiyonlarımızı nasıl test edebiliriz?

Boş bir react projesi oluşturduğumuzda proje içerisinde bu test kodları aslında kurulu şekilde gelmektedir. Aşağıya package.json örneğini ekledim. Terminal içerisine ‘npm run test’ dediğimizde test uzantılı kodlarımız test edilmeye hazır olacaktır. Proje içerisinde ‘App.Test.js’ hazır geliyor; biz sadece bu test uzantılı kodları çoğaltıp kendi kodlarımızı ekleyeceğiz.

Testimizi yazmaya başlayalım şimdi fonksiyonumuzu test edeceğiz. Ana dizine new.js adında bir sayfa oluşturalım içerisine aşağıdaki kodları ekleyelim. Bu testte amacımız string ifademizi büyütülmüş olarak geriye döndermeyi amaçlıyoruz.

const new=(param)=>{
    return param.toUpperCase()
}
module.exports={new}

sonra bir sayfa daha oluşturalım ve bu sefer uzantısını değiştirelim. new.test.js içerisine aşağıdaki kodları ekleyelim.

const {new}=require('./new')


test('merhaba = MERHABA',()=>{
    expect(new('merhaba')).toBe('MERHABA')
})

bu kodu açıklayacak olursak test callback function içerine “expect” yani gerçekleşmesini beklediğimiz durum, “toBe” ise sonuç yani merhaba durumunun MERHABA’ya dönüşmesini bekliyoruz diyebiliriz.

Şimdi gelelim yazdığımız testin sonucuna. Eğer testimiz başarılı ise terminalde Yeşil renk düzeninde “passed” uyarısını alacağız. Yazdığımız testte bir hata var ise “failed” uyarı kodunu alacağız.

const {new}=require('./new')

test('merhaba = MERHABA',()=>{
    expect(new('merhaba')).toBe('MERHABA')
})

sonuç başarılı çünkü string ifademiz büyütülmüş şekilde geriye döndü.

const {new}=require('./new')

test('merhaba = MERHABA',()=>{
    expect(new('merhaba')).toBe('mERHABA')
})

sonuç hatalı toBe içerisinde mERHABA şeklinde yazdıldığı için hata aldı.

Unit test yazılarıma devam edeceğim umarım faydalı olur benim ve okuyacak olanlar için :)

Jest hakkında daha detaylı bilgi almak isteyenler için https://jestjs.io/ linki buraya bırakıyorum.