React Component’ları için Nasıl Test Yazılır?
Mocha, Chai ve Enzyme
Giriş
React ile web uygulamaları geliştirirken yazdığımız component’ların nasıl test edileceği ile ilgili bazı bilgiler vermeye çalışacağım.
React bilindiği gibi farklı bir render mekanizmasına sahip. Component’ları test edebilmek için bir şekilde bu render mekanizmasını test sırasında çalıştırmak gerekiyor. Öncelikle test için kullanacağımız araçlardan bahsedelim, ardından örnek ile bir component test sürecini inceleyelim.
Jest: Facebook React component’larının testi için kendi geliştirdiği javascript test framework’ünü kullanmamızı öneriyor. Test için renderer package’ına sahip. Import ettiğiniz component için bir renderer create ettikten sonra test case’lerinizi yazmaya başlayabiliyorsunuz.
Enzyme: AirBnB tarafından geliştirilen bu kütüphane ile React component’larını test edebiliyoruz. Shallow Rendering özelliği ile aynı jest gibi bir render simülasyonu yaparak test yazmamızı sağlıyor. Enzyme’in güzel yanı ise sadece test framework’lerine React component’larının testi için yardımcı bir araç olarak tasarlanmış olması. Bu sayede ister Jest ile isterseniz Mocha veya Jasmine ile birlikte kullanabiliyorsunuz.
Kullanacağımız Diğer Araçlar
Test için faydalanacağımız diğer araçlardan da kısaca bahsetmek istiyorum.
Mocha
JavaScript için test yazmak istediğimde genellikle Mocha’yı tercih ediyorum ben. Oldukça esnek ve kolay bir test framework olması benim tercih nedenim. FullStack bir çözüm olmadığı için yanında başka araçlarıda kullanıyoruz.
Chai
Mocha’nın assertion modülü olmamasından dolayı expect, should, assert gibi işlemler için Chai kullanacağız.
Örnek Senaryo:
Test etmek için bir menü yapısı düşünelim. Menüye ait elemanları bir rest servis ile veya farklı bir şekilde dışarıdan almayı planlayalım. Component’ımızı datanın kendisinden haberi olmayacak şekilde tasarlayacağız. Sadece kendisine pass edilecek field’ları ve data yapısını biliyor olacak(presentational component). Buna göre component geliştirelim.
Component:
Tasarladığımız component basitçe kendisine pass edilen array tipindeki menü listesini bir ul içerisine li > link > {name} formatında map ederek render ediyor ve kendi stilini veriyor. State tutmadığı için Stateless Component yapısında yazmayı tercih ettim. Yazı daha çok react geliştiricilerine hitap ettiği için kod detayına girmeyeceğim.
Test:
Test kodumuz yukarıdaki yapıya sahip component’a istediği tipte prop’ları pass edecek ve ardından enzyme ile shallow rendering yaparak test case’lerimizi yazacağız. Syntax olarak hemen hemen tüm araçlar için aynı prensipler buradada geçerli.
Püf nokta render edilen elemanları find ile bulmak ve beklediğimiz case’e uygun mu değil mi kontrol etmek. shallow() bize ShallowWrapper isminde bir obje döndürüyor. Tüm olay tam olarak burada gerçekleşiyor. Artık find ile bu obje içerisinde test etmek istediğimiz node’ları yakalayıp expect’den geçirebiliriz. Burdan sonrası için api dökümanını referans almanız gerekiyor.
Class isimleri ile erişim:
Yukarıdaki test örneğinde React Router’ın Link’ini find ile yakaladık. Ancak bu her zaman istediğiniz bir kullanım şekli olmayabilir. Bu nedenle style class isimlerinden elementleri yakalamak isteyebiliriz. Bunun için aşağıdaki gibi pratik bir çözüm uygulayabilirsiniz.
React component’larını test etmek oldukça basit. Eğer dilerseniz Sinon dahil ederek daha detaylı test case’leri yazabilirsiniz.
