React Testing Library ile Kullanıcı Odaklı Birim Testler Yazmak
React Testing Library, React bileşenlerini ve bu bileşenlerin davranışlarını test etmek için, son yıllarda oldukça yaygın şekilde kullanılan test kütüphanelerinden bir tanesi. Aslında React Testing Library, DOM Testing Library isimli çekirdek kütüphane üzerine inşa edilmiş, içerisine eklenen kullanışlı API’lar aracılığıyla React bileşenleriyle çalışmak için özelleştirilmiş bir kütüphane. Benzer şekilde farklı framework’lerle birlikte çalışabilen Vue Testing Library, Angular Testing Library, Svelte Testing Library gibi kütüphaneler de bulunmakta.
Motivasyon
JavaScript uygulamalarını ve React bileşenlerini test etmek için önceleri birçok farklı popüler kütüphane kullanılıyordu. Mocha, Jasmine, Enzyme bunlardan bazıları. Fakat ne oldu da Testing Library onlardan ayrıldı?
Testing Library’i geliştiren ekip, geliştiricilerin yazdıkları birim testlerin, uygulamanın kendisine dair çok fazla iş bilgisi içerdiğini ve bu nedenle de yazılan testlerin davranış olarak son kullanıcıdan ziyade geliştiricilerin reflekslerine yakın olduğunu söylüyordu. JavaScript ve React ekosistemine aşina olanların yakından tanıdığı Kent C. Dodds’ın 2018 senesinde attığı tweet’deki şu söz adeta kütüphanenin de mottosu oldu.
Kent C. Dodds, yazılan testlerin, uygulamayı kullanacak son kullanıcıların davranışlarına ne kadar benzerse o kadar güvenilir olabileceğinden bahsediyordu. Bu sayede, yazılan testlerin uygulamaya kod katmanında değil deneyim olarak bağlı olacağından, bakımı daha kolay, kod katmanında yapılacak değişikliklere karşı daha az kırılgan ve uzun ömürlü yani sürdürülebilir olacağını savunuyordu.
Örnek Senaryo
Basit bir örnek düşünelim. Bir web uygulamasına giriş yapmamızı sağlayacak forma ait bileşenleri test ettiğimizi varsayalım. En basit hâliyle kullanıcıdan iki adet girdi alacak metin kutusuna ve formu iletecek bir buton bileşenine ihtiyacımız var. Geleneksel metodolojilerle birim testler yazıyor olsaydık bu bileşenlere ekseriyetle CSS veya XPath seçicileri üzerinden erişecektik. Bir süre sonra uygulamanın davranışında bir değişiklik olmasa dahi kaynak kodunda yapılacak en ufak bir seçici değişikliği testlerimizin bozulmasına neden olacaktı.
Fakat bu testi bir son kullanıcı gözünden yazmış olsaydık, kullanıcı, üzerinde “kullanıcı adınız” yazan metin kutusuna kullanıcı adını, “parolanız” yazan metin kutusuna parolasını yazacak ve yine üzerinde “giriş yap” yazan butona tıklayarak uygulamaya giriş yapmayı bekleyecekti. Uygulamaya dair hiçbir ek bilgiye ihtiyaç duyulmayacaktı.
Testing Library ve onu temel alan diğer kütüphaneler geleneksel metodolojileri de desteklemekle birlikte geliştiricilere bu şekilde kullanıcı odaklı birim testler yazdırmayı amaçlıyor.
İlk Test
React Testing Library, bir test framework’ü veya test runner’ı olmadığı için yazılan testleri çalıştırabilmek için Jest vb. bir test runner uygulamasına ihtiyaç duyuyor. Jest olmadan kullanımı mümkün olsa da topluluk Jest’i kullanmayı öneriyor. Eğer testlerini yazacağınız React uygulamasını, Create React App vb. bir şablon (boilerplate) üzerinden kurduysanız büyük ihtimalle gerekli test ortamı yapılandırmaları ve örnek testler projeniz içerisinde yer alacaktır. Sıfırdan kurulum yapacaksanız eğer ihtiyacınız olan paketleri seçerek kurmanız ve yapılandırmalarıyla ayrıca ilgilenmeniz gerekecek.
İlk test için yukarıda bahsettiğimiz giriş formundaki buton bileşenini ele alalım. Gerçek hayat senaryolarında pek karşılığı olmasa da çalışma prensibini anlayabilmek adına buton bileşeninin dışarıdan text ve message isminde iki değer aldığını, üzerinde text değeri yazan butona tıklanıldığında ise ekranda message değerinin gösterildiğini varsayalım.
Test senaryosunun akışı, son kullanıcının uygulamayı kullanırken yaşadığı deneyime çok benzediği için her ne kadar kendisini açıklasa da yine adım adım üzerinden geçelim.
- İlk olarak render metodu sayesinde, test dosyamıza import ettiğimiz buton bileşenini tıpkı bir React uygulaması içerisinde kullanılıyormuş gibi render ettik.
- Akabinde click, keyDown, change, drop gibi kullanıcı etkileşimlerini simüle edebileceğimiz fireEvent objesinin click metoduyla üzerinde “foo” yazan butona tıkladık.
- Son olarak da kullanıcının gördüğü arayüze tekabül eden screen objesi içerisindeki getByText metoduyla “bar” metninin ekranda görünür olup olmadığını kontrol ettik.
Bu üç adımlı test yazma sürecine AAA yani Arrange, Act, Assert pattern ismi veriliyor. İlk olarak test edilecek ortamı hazırlıyor, sonrasında bu ortamla birtakım etkileşimlere giriyor ve nihayetinde bu etkileşimler neticesinde kimi iddialarda bulunarak testi tamamlıyoruz.
Sonuç
Testing Library, son kullanıcının davranışlarını simüle etmek için birçok farklı query ve event’i çekirdek kütüphanesinde barındırıyor. Yazılacak testin ihtiyacına göre bu özellikleri yine topluluk tarafından geliştirilen eklentilerle zenginleştirmek mümkün. React Testing Library de çekirdek kütüphaneden aldığı yeteneklerle, geliştiricilere React bileşenlerini test etmenin pratik ve sürdürülebilir bir yöntemini sunuyor.
