React Unit Testing Menggunakan Enzyme | Goodpixelpro Tutorial

Goodpixelpro Tutorial – 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
Terimakasih telah berkunjung ke website Goodpixelpro. Semoga bermanfaat.!

There are no comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Start typing and press Enter to search

Shopping Cart