React Unit Testing Menggunakan Enzyme

Pada blog post kali ini, saya akan membahas mengenai unit testing aplikasi React menggunakan Enzyme. Sebelum saya membahas lebih dalam mengenai Enzyme, saya akan membahas definisi dari software testing terlebih dahulu.

Apa itu Software Testing ?
Software Testing adalah salah satu step dalam development aplikasi. Pada tahap software testing, dilakukan pengecekan apakah result yang didapatkan dari aplikasi sesuai dengan result yang diharapkan dari aplikasi tersebut. Tidak hanya itu, software testing juga dilakukan untuk memastikan bahwa sistem dari aplikasi tersebut sesempurna mungkin (meskipun tidak mungkin perfect, setidaknya sebisa mungkin mendekati perfect). Software testing juga membantu untuk mengidentifikasi error dan requirements yang kurang sesuai. Software testing dapat dilakukan secara manual ataupun menggunakan automated tools. Terdapat 3 macam paradigma software testing, yaitu :

1. Unit Testing
   Unit Testing mengacu pada test yang dilakukan pada potongan-potongan code atau unit, sehingga kita dapat memastikan bahwa potongan code tersebut dapat berjalan dengan semestinya, sesuai dengan yang kita harapkan. 
2. Functional Testing
   Functional Testing mengacu pada test yang dilakukan untuk melihat behavior dari component.
3. Integration Testing
   Integration Testing mengacu pada test yang dilakukan kepada keseluruhan sistem dari aplikasi dengan seperti layaknya end-user menggunakan aplikasi tersebut.

Enzyme adalah JavaScript testing library yang dibuat oleh AirBnb. Enzyme menyediakan method yang sangat baik untuk memanipulasi output dari virtual DOM React. 

Untuk melakukan unit testing menggunakan Enzyme, kita juga akan menggunakan Jest, yaitu testing framework React official yang dibuat oleh Facebook.


Configuration

Langkah-langkah yang harus dilakukan untuk menginstall library Enzyme dan Jest agar bisa digunakan untuk unit testing adalah sebagai berikut :

1. Buat sebuah app React dengan menggunakan command create-react-app. Setelah proses build app selesai, melalui terminal, cd ke folder app yang baru saja dibuat.
   
2. Ketik command :
   
   

   npm install jest-enzyme --save-dev

   
   

   setelah selesai, ketik command :
   
   

   npm i --save-dev enzyme enzyme-adapter-react-16

3. Ketik command : 

   
   

   npm add react-addons-test-utils
   
   

   lalu tekan enter.
4. Untuk menjalankan test, gunakan command :
   
   

   npm test
   

   
   
5. Setelah selesai, akan muncul tampilan seperti ini
   

   

   Test yang dijalankan merupakan code yang terdapat di file App.test.js. Kita dapat mengubah isi dari file App.test.js untuk keperluan testing aplikasi kita sesuai dengan kebutuhan.
   
6. Untuk menggunakan enzyme pada saat unit testing, tambahakan code ini pada file App.test.js
   
   

   import {shallow, mount, render} from 'enzyme';

   
   

   Shallow digunakan untuk menguji komponen sebagai unit.
   Mount digunakan untuk menguji komponen yang memerlukan lifecycle secara keseluruhan untuk dapat sepenuhnya ditest.
   Render digunakan untuk merender komponen menjadi static HTML dan menganalisis struktur HTML yang dihasilkan.
   

Contoh Unit Testing Aplikasi React Menggunakan Enzyme
Sebagai contoh unit testing, saya membuat sebuah aplikasi React sederhana yang menampilkan angka dan 2 button. Button kiri berfungsi untuk menambah angka, dan button kann berfungsi untuk mengurangi angka.

Tampilan aplikasi untuk testing

Code dari aplikasi

Untuk memulai testing, buka file App.test.js. Sebelumnya, kita sudah menjalankan npm test setelah build aplikasi di awal, dan tampilan terminal menunjukkan ada 1 test berstatus passed. 1 test tersebut adalah test default yang memang sudah disediakan pada saat kita membuild aplikasi.

Referensi :

1. https://www.guru99.com/software-testing-introduction-importance.html
2. https://en.wikipedia.org/wiki/Software_testing
3. https://www.fullstackreact.com/30-days-of-react/day-22/#testing
4. https://www.toptal.com/react/tdd-react-unit-testing-enzyme-jest
5. https://gist.github.com/fokusferit/e4558d384e4e9cab95d04e5f35d4f913
6. https://github.com/airbnb/enzyme/tree/master/docs/api
7. https://jest-bot.github.io/jest/docs/expect.html#tohavelengthnumber
8. https://github.com/FormidableLabs/enzyme-matchers/tree/master/packages/jest-enzyme