Jangan Lupa! Cara Testing di React.js dengan Jest dan React Testing Library

Jangan Lupa! Cara Testing di React.js dengan Jest dan React Testing Library
Photo by David Clode / Unsplash

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:

  1. 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.

  1. Buat File Tes:Buat file dengan nama Greeting.test.js di direktori yang sama dengan komponen Greeting.js.
  2. 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 atau async/await, pastikan kamu menangani tes asinkron dengan benar menggunakan async dan await 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.