Jest ve Enzyme ile React Uygulamalarının Test Edilmesi

React uygulamalarını test etmek için kullanacağımız yöntemler ve araçlarla ilgili ufak bir giriş…

Testte Kullanılan Tabirler

• Unit Test: Bir tane React Component`i veya fonksiyonu test etmek. Enzyme`de bulunan “shallow()” bir unit testtir.
• Integration Test: Birbirleriyle aralarında parent-child ilişkisi olan componentlerin ve fonksiyonlarının test edilmesi. Enzyme`de bulunan “mount()” ile uygulanır. Kullanıcının sistem üzerinde işlemlerini uygulama üzerinde test etmenin en etkili yollarından biridir. Bu testler sayesinde sonradan yapılan bir değişiklikte ne tür hatalar alabileceğimiz konusunda bilgi sahibi olabiliriz.
• Mock Function: Bir fonksiyonu teste yönelik sonuçlar vermesi için tekrar tanımlamak denebilir. Örnek olarak, bir API isteğini mock ederek kullanabiliriz. Sonuçta gerçek değerlerle her zaman çalışmak istemeyiz. (Kredi kartından para çekmek).

Jest ve Enzyme Kurulumu

npm install --save-dev jest
#veya
yarn add --dev jest
yarn add --dev enzyme enzyme-adapter-react-16 react-test-renderer
#or
npm install --save-dev enzyme enzyme-adapter-react-16 react-test-renderer

Eğer uygulamamız create-react-app ile wrapperlandıysa package.json kısmında,

scripts:{
    test:'react-scripts test'
}

eklememiz (eklenmiş değilse) yeterli olacaktır.

Jest ile Testlere Başlayalım

Dosyalarınız test.js veya .spec.js uzantılarından birine sahip olması test modüllerimizin tanınması için yeterli olacaktır.

ParentComponent stateful bir component ve aynı zamanda da ChildComponent`i render eden bir parent component.

ChildComponent ise stateless bir component ve parent component`inden aldığı bir prop`u (handleSetState) var.

Uygulamayı çalıştırdığımız zaman karşımıza böyle bir ekran çıkıyor ve her butona bastığımızda sayı 1 artıyor.

Bizim burada yapacağımız test integration test olacak. ChildComponent.test.js içinde 2 component`i de mount edip başarılı sonuç alıp alamadığımıza bakacağız.

Şimdi öncelikle kullandığımız terimlere bi bakalım, describe test suitlerimizi blocklara ayırmayak için kullandığımız bir 2 parametreli bir fonksiyon diyebiliriz. 1. parametresi mesaj, 2. parametresi ise callback fonksiyonudur.

it test suitlerimizin asıl çalıştığı bloktur, describe gibi 2 parametre alır.

beforeEach her it ten önce çalışır.

Gördüğünüz gibi başarılı 2 test görünüyor (1 tanesi App.test.js den gelen initial test)..

Şimdi asıl integrasyon testine geçelim.

Yukarıdaki test suite in de gördüğünüz gibi ChildComponent`imizi mount ettiğimiz değişkenle, component içerisindeki button`u CSS seçicileri ile buluyoruz.

jest.spyOn ile onClick prop`unu takip etmeye başlıyoruz ve sonrasında o prop`u tetikliyoruz.

Asıl önemli olacan jestSpyOnClick in çağrılıp çağrılmaması değil (Tabi ki önemli butona bastığımızı öyle anlıyoruz), ParentComponent`teki countOfClicks state`inin değişip değişmediği. Ve görebileceğiniz gibi testlerimiz başarıyla geçmiş bulunuyor ve bizde integrasyon testlerine ufak bi başlangıç yapmış oluyoruz.

Dilim döndüğünce anlatmaya çalıştım, umarım bir dahaki yazıda Axios requestlerini nasıl mockladığımızı anlatırken görüşmek üzere. Esen kalınız.