Jest ile Component SnapShot Testing
React ile component geliştirirken TDD yapmak isteriz. Ben test için AirBnB’nin Enzyme’ini Mocha ile birlikte kullanıyorum genellikle. Geçenlerde Can Uzunoğlu bana Jest’in SnapShot testlerinden bahsetti. Oldukça hoşuma gitti. Nasıl oluyor neler yapılıyor derken biraz incelemeye başladım ve daha önce Enzyme ile UI etkilişimlerini nasıl test ettiğim ile karşılaştırmaya başladım.
Biz bugüne kadar UI testlerini yaparken bir çok araç kullandık. Bazen bu component testlerini yazmak proje büyüdükçe sıkıcı olabiliyor. Çünkü yaptığımız temel şeyler beklenilen ve var olan durumlar eşit mi değil mi x class’ı olmalı gibi kontrollerden ibaret. Bunu yapmamızın amacıda UI’ın değişip değişmedini anlamak ve olası hataların önüne geçmek veya data gelmesi zorunlu alanlara gerçekten bir data geliyor mu görmek.
Jest SnapShot testlerinde birebir react component’larınızın ekran görüntüsünü alıyor bir anlamda. Ancak bu görüntü bir jpg, png gibi ekran görüntüsü değil elbette. Component’ı JSON formatına dönüştürüyor. Daha sonra bunu .snap adında dosyalara yazıyor ve dosya adına -test.snap ekliyor. Ardından toMatchSnapshot() ile sizin Component’ınızda yapılan her değişikliği match etmeye çalışıyor. Aradaki diff ile test’i fail ediyor eğer bir fark yoksa testiniz geçiyor.
Hatta bunu watch modunda yaparsanız çok daha kullanışlı oluyor. Bazen değişmemesi gereken yerlerde yanlışlıkla bir şeyler değiştirebiliyoruz bu sayede hızlıca fark edebiliyoruz.
Yeni değişiklikler test sürecine nasıl dahil oluyor ?
Elbette kod üzerinde değişiklik yaptığınızda normal şartlarda yeni test case’leri eklersiniz. Buradada durum hemen hemen aynı. Tek yapmanız gereken belirli aralıklarla jest — updateSnapshot komutunu çalıştırmak. Jest sizin tüm yeni değişikliklerinizi -test.snap dosyasında güncelliyor.
Ancak şöyle bir uyarı yapmakta fayda var. SnapShot test ile sadece tekrar tekrar oluşturduğumuz UI’ın son durumunu kontrol eden case’leri yazmaktan kurtuluyoruz. Data’nın formatındaki doğruluğu veya diğer olasılıkları ilgili bileşenler için kendimiz yazmalıyız kısacası testlerimiz deterministik olmalı.
Örnek Test:
SnapShot çıktısı:
Component’da ufak bir update yapalım
Component’da update yapıldıktan sonra jest daha önce aldığı görüntü ile yeni görüntüyü karşılaştırdı ve aradaki diff dolayısı ile testi fail etti. Oldukça kullanışlı ve pratik bir yöntem. Release çıkarken yanlışlıkla UI’ın bozulmasının önüne geçmek içinde kullanılabilir.
Tek dezavantajı snapshot update yönteminin manuel olması. Bunu manuel yapmalarının en önemli sebebi, geliştirici olarak UI’da bir değişiklik yapmıyorsam testlerin update olmaması gerekiyor. Eğer bir değişiklik yaptıysam bunu bildiğim için manuel olarak update yaptırmam çokta mantıksız değil. Aynı zamanda code review sırasında da ekstra bir review maliyetini azaltıyor PR öncesi build sürecinde otomatik olarak check ettirileceği için.
Kaynaklar
- https://facebook.github.io/jest/docs/snapshot-testing.html
- https://github.com/adriantoine/enzyme-to-json
- https://blog.grommet.io/post/2016/09/01/how-we-landed-on-jest-snapshot-testing-for-javascript
- https://github.com/facebook/jest/tree/master/examples/snapshot
—
