React-Redux Frontend Testing
Jika kita ingin menerapkan frontend testing, memang bisa dibilang belum ada standard atau implementasi tetap di bidang ini. Karena seperti yang kita ketahui dunia frontend development berkembang sangat cepat yang mana membuat dunia frontend testing cukup susah untuk mengimbangi perkembangannya.
Di kesempatan kali ini, saya ingin memberikan tips-tips yang berguna apabila anda ingin menerapkan TDD (Test Driven Development) pada frontend terutama aplikasi react-redux.
How we do it?
Jadi ada beberapa jenis test yang bisa diimplementasikan untuk mengetest aplikasi react-redux kamu, contohnya adalah:
- Unit Test
- Integration Test
- Snapshot Testing
Mulai dari yang pertama yang paling simple adalah Unit Test. Apa itu unit test? Seperti namanya unit test adalah satuan test yang menguji behaviour dari sebagian kode atau yang biasa kita sebut function/method. Dan seperti yang kita tahu, React-redux memiliki beberapa item yang bisa kita test seperti component react itu sendiri, reducers, actions. Nah implementasi dari unit test ini bisa kita terapkan pada reducers, karena reducer itu sendiri hanyalah sebuah pure function. Pada kasus ini misalnya saya memiliki reducer seperti berikut
Yang mana landing page reducer disini dia akan memberikan output yang berbeda tergantung dari tipe action yang dia dapat. Bisa dilihat ada dua tipe action yaitu fetch_latest_cases dan default action, kita bisa melakukan unit test dengan mengecek setiap behaviour dari dua tipe action tersebut.
Implementasi unit test bisa dilakukan dengan bantuan dari library jest.
Karena reducer terikat dengan store redux, maka dari itu kita bisa menggunakan library redux-mock-store untuk meng-mock store dari reducer tersebut. Lalu saya juga membuat object mock yang bernama mockCases, yang sama seperti dengan kondisi data yang kita dapat dari backend nantinya.
Lalu setelah membuat mockStore dan mockCases, langsung saja bisa dilakukan unit test dengan memanggil fungsi landingPageReducer dengan dua tipe argumen action yang berbeda, lalu kita bandingkan hasilnya dengan output yang sebenarnya dengan function expect(). Dengan begitulah kita sudah melakukan unit test.
Lalu yang kedua adalah integration testing, Integration testing adalah sebuah metode testing yang menguji sebagian kode yang telah terintegrasi dengan servis lainnya seperti backend sistem kita. Dalam react-redux biasa kita bisa menerapkan integration testing ini pada action, karena biasa di action inilah kita melakukan request ke backend untuk melakukan apa yang kita mau seperti mendapatkan data/hapus data dll. Nah tapi untuk melakukan integration testing itu sendiri, kita tidak perlu menjalankan backend system kita, karena menyebabkan front-end testing kita tidak bisa dilakukan independen. Kita bisa melakukannya dengan lagi lagi kita mock setiap pemanggilan / request ke server.
Yang mana pada kasus ini saya menggunakan library axios untuk melakukan request ke server, dan terdapat library axios-mock-adapter yang bisa membuat kita me-mock axios tersebut. Hasil dari mock axios tersebut, setiap request dengan axios call, kita bisa menetapkan response dari axios request tersebut apa. Contohnya bisa dilihat gambar ini
dan ini adalah isi dari actions saya
Maksud dari action testing diatas adalah, ketika saya menjalankan test failed get latest cases, saya me-mock axios call pada suatu endpoint sehingga response dari axios call tersebut akan memberikan status code 400 dengan response data “Bad message”. Dengan ini kita bisa menjalankan action kita, yang mana didalamnya terdapat axios call pada endpoint yang sama, dan kita bisa mengecek behaviour dari action tersebut yang mana akan mengubah store kita. Lalu setiap selesai menjalankan sebuah test, akan dilakukan reset store dan reset axios mock agar di test selanjutnya kita bisa melakukan mock axios yang berbeda lagi.
Lalu yang terakhir adalah snapshot testing, mungkin untuk yang satu ini jarang ada yang pernah dengar sebelumnya, karena snapshot testing ini sendiri biasa dilakukan di react. Latar belakang adanya snapshot testing ini adalah component react yang merupakan kode deklaratif, lantas bagaimana kita mengetest kode deklaratif tersebut. Maka itulah munculah snapshot testing yang mana snapshot sendiri adalah hasil render dari suatu component, dan snapshot testing adalah testing yang mana membandingkan snapshot yang pernah disimpan sebelumnya dengan snapshot yang ada sekarang. Snapshot testing akan gagal apabila terdapat perbedaan antara snapshot yang sebelumnya telah didapat dengan snapshot yang baru.
Snapshot testing ini bisa kita lakukan dengan bantuan library enzyme, yang mana memberikan fungsi shallow render untuk menghasilkan hasil render dari sebuah component. Berikut implementasinya
Kesimpulan : dengan melakukan ketiga metode testing diatas, sudah cukup untuk mencover semua kode react redux appliacation, sehingga code coverage kita bisa mencapai 100% dan dapat menerapkan TDD (Test driven development). Sekian dari saya, happy coding happy life! Semoga bermanfaat.
