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.

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.

Engineer @eBay, Frontend, JavaScript, Web

Engineer @eBay, Frontend, JavaScript, Web