[Week 9] Snapshot dengan Jest!
Pada pos saya sebelumnya, telah dibahas beberapa tutorial yang terkait dengan layouting pada UI. Mungkin bisa dilihat di link ini atau ini terkait tutorial tersebut. Kali ini, saya akan coba untuk mempublikasikan tentang Snapshot, sebuah fitur bawaan dari Jest yang dapat digunakan untuk tracking perubahan pada komponen yang telah kita buat. Cara kerja snapshot terbilang sangat simpel. Pada intinya, Jest akan mengambil komponen yang di-test, melakukan rendering, lalu dari hasil rendering tersebut diambil snapshot yang sesuai dari komponen. Selanjutnya, ketika kita terus menerus menjalankan proyek kita, Jest akan melakukan hal yang sama dan memandingkan snapshot lama dengan snapshot yang baru setiap kali test suite dijalankan.
Untuk memulai testing dengan Snapshot, terdapat beberapa hal yang harus di-import pada file test terkait. Selain itu, kita terlebih dahulu download paket renderer yang telah tersedia oleh React Test Renderer. Instalasinya cukup mudah, tinggal menjalankan kode berikut.
npm install react-test-renderer
Setelah melakukan instalasi paket, kita harus meng-import paket tersebut pada file testing React Native kita. Selain itu, kita juga harus meng-import komponen yang akan kita testing. Berikut adalah contoh dari import tersebut.
// src/tests/Products.test.js
import React from ‘react’;
import Products from ‘../pages/Products’;
import renderer from ‘react-test-renderer’;
Seperti dilihat pada baris kedua, kita akan melakukan tests pada Products.js yang komponennya dapat dilihat pada link ini. Selanjutnya, kita kan memanggil fungsi yang akan melakukan rendering untuk komponen pada Products.js. Berikut adalah kode yang harus ditambahkan.
// src/tests/Products.test.js
test(‘renders correctly’, () => {
const tree = renderer.create(<Products />).toJSON();
expect(tree).toMatchSnapshot();
});
Setelah itu, kita sudah mendapatkan seluruh file yang dibutuhkan untuk melakukan Snapshot. Setelah memiliki file untuk melakukan Snapshot test. aJest akan membuat folder __snapshots__ setiap kali kita menjalankan test suite. Folder tersebut akan menyimpan seluruh hasil dari setiap Snapshot test. Karena file saya bernama Products.test.js, maka Jest secara otomatis akan membuat Products.test.js.snap untuk menyimpan hasil Snapshot. Hasilnya terlihat seperti pada link ini.
