Jangan Lupa! Cara Testing di React.js dengan Jest dan React Testing Library
Testing di React.js itu penting banget buat memastikan aplikasi kita berjalan dengan baik dan bebas dari bug. Dua alat yang sering dipakai buat testing di React adalah Jest dan React Testing Library. Yuk, kita bahas gimana cara pake kedua alat ini dengan gaya yang santai dan mudah dipahami!
Apa Itu Jest dan React Testing Library?
- Jest: Jest adalah framework testing untuk JavaScript yang dikembangkan oleh Facebook. Dia bisa dipake buat ngelakuin unit testing, integrasi, dan snapshot testing. Jest udah terintegrasi dengan baik sama React, jadi cocok banget buat proyek React kamu.
- React Testing Library: Ini adalah library yang dirancang khusus buat testing komponen React. Tujuannya adalah membantu kita ngetes komponen dari sudut pandang pengguna, dengan fokus pada interaksi dan output yang dihasilkan.
Persiapan Awal
Sebelum mulai, pastiin kamu udah punya proyek React yang siap buat ditest. Kalo belum, kamu bisa bikin proyek baru pake Create React App, yang udah nyediain konfigurasi Jest secara default. Tapi, kalo kamu mau setup manual, berikut langkah-langkahnya:
- Install Jest dan React Testing Library:Kamu bisa install kedua alat ini pake npm atau yarn:
npm install --save-dev jest @testing-library/react
atau
yarn add --dev jest @testing-library/react
Konfigurasi Script di package.json
:
Tambahkan script berikut di file package.json
kamu:
"scripts": {
"test": "jest"
}
Membuat Tes Sederhana
Misalnya, kita punya komponen React sederhana bernama Greeting
:
import React from 'react';
function Greeting({ name }) {
return <h1>Hello, {name}!</h1>;
}
export default Greeting;
Sekarang, kita mau ngetes apakah komponen ini menampilkan teks yang sesuai dengan prop name
yang diberikan.
- Buat File Tes:Buat file dengan nama
Greeting.test.js
di direktori yang sama dengan komponenGreeting.js
. - Tulis Tes dengan React Testing Library:Berikut contoh kode untuk mengetes komponen
Greeting
:
import React from 'react';
import { render, screen } from '@testing-library/react';
import Greeting from './Greeting';
test('menampilkan teks dengan nama yang diberikan', () => {
render(<Greeting name="Budi" />);
const greetingElement = screen.getByText(/Hello, Budi!/i);
expect(greetingElement).toBeInTheDocument();
});
Di sini, kita menggunakan fungsi render
dari React Testing Library untuk merender komponen Greeting
dengan prop name
bernilai "Budi". Lalu, kita menggunakan screen.getByText
untuk mencari elemen yang menampilkan teks "Hello, Budi!". Terakhir, kita memastikan elemen tersebut ada di dalam dokumen dengan expect(...).toBeInTheDocument()
.
Menjalankan Tes
Setelah menulis tes, kamu bisa menjalankannya dengan perintah berikut:
npm test
Jest akan menjalankan semua file yang berakhiran .test.js
atau .spec.js
dan menampilkan hasilnya di terminal.
Tips Tambahan
- Mocking: Jika komponen kamu bergantung pada API eksternal atau fungsi tertentu, kamu bisa menggunakan fitur mocking di Jest untuk mensimulasikan perilaku tersebut tanpa benar-benar memanggilnya.
- Snapshot Testing: Jest mendukung snapshot testing, yang memungkinkan kamu menyimpan representasi UI dan membandingkannya di tes berikutnya untuk mendeteksi perubahan yang tidak diinginkan.
- Testing Asynchronous Code: Jika komponen kamu menggunakan kode asinkron seperti
fetch
atauasync/await
, pastikan kamu menangani tes asinkron dengan benar menggunakanasync
danawait
di fungsi tes kamu.
Kesimpulan
Dengan menggunakan Jest dan React Testing Library, kamu bisa memastikan komponen React kamu berfungsi sesuai harapan. Kedua alat ini memudahkan proses penulisan dan menjalankan tes, sehingga kamu bisa lebih percaya diri dengan kode yang kamu tulis. Jangan lupa untuk selalu menulis tes setiap kali menambahkan fitur baru atau mengubah kode yang ada, agar aplikasi kamu tetap stabil dan bebas dari bug.