Ini adalah Artikel 15 dari 16 dalam seri lengkap belajar React dari nol. Klik tombol di bawah untuk melihat semua artikel seri ini.
🗂️ Lihat Semua Artikel SeriPernah nggak, kamu sudah susah payah nulis komponen React, lalu setelah di-push ke production… ternyata ada yang ngambek? Tombol nggak berfungsi, data nggak muncul, atau tampilan berantakan di browser tertentu? Nah, skenario itulah yang bisa dicegah dengan React Testing Library Jest unit test. Testing bukan sekadar formalitas — itu adalah safety net yang menyelamatkan kamu dari mimpi buruk deployment. Di artikel ke-15 dari Seri Belajar React: Zero to Zorro ini, kita akan praktik langsung cara menulis test yang bermakna, bukan sekadar test yang "asal hijau".
React Testing Library (RTL) adalah toolkit testing yang mendorong kamu menguji komponen seperti cara pengguna berinteraksi, bukan mengintip detail implementasi internal. Sedangkan Jest adalah test runner — mesin yang menjalankan semua test kamu dan melaporkan hasilnya.
🧪 Kenapa React Testing Library Jest Unit Test Itu Penting?
Bayangkan kamu membangun jembatan. Sebelum dibuka untuk umum, insinyur pasti melakukan stress test — memastikan jembatan itu kuat menanggung beban. Nah, testing di React juga prinsipnya sama persis: kamu "stres test" komponen sebelum pengguna nyata menyentuhnya.
Tanpa testing, kamu hanya bisa berharap kode berjalan mulus. Dengan testing, kamu punya bukti otomatis bahwa kode berjalan sesuai ekspektasi — dan saat ada perubahan di masa depan, kamu tahu persis bagian mana yang "retak".
Menurut laporan Stack Overflow Developer Survey, lebih dari 60% developer profesional menggunakan automated testing sebagai bagian dari workflow mereka. Kamu yang belum pakai testing, sedang ketinggalan standar industri.
⚙️ Setup dan Instalasi: React Testing Library Jest di Proyek Kamu
Kabar baiknya: kalau kamu membuat proyek dengan Create React App atau Vite + template React, Jest dan React Testing Library sudah sering tersedia atau mudah ditambahkan. Mari kita setup dari awal!
Jalankan perintah berikut di terminal proyekmu:
npx create-react-app my-app
# Untuk proyek existing atau Vite
npm install --save-dev @testing-library/react @testing-library/jest-dom @testing-library/user-event jest jest-environment-jsdom
Tambahkan konfigurasi di jest.config.js:
export default {
testEnvironment: 'jsdom',
setupFilesAfterFramework: ['@testing-library/jest-dom'],
transform: {
'^.+\\.jsx?$': 'babel-jest'
}
}
"scripts": {
"test": "jest",
"test:watch": "jest --watch",
"test:coverage": "jest --coverage"
}
Kalau pakai Create React App, cukup jalankan npm test dan semuanya langsung berjalan. CRA sudah meng-include Jest dan RTL secara default — nggak perlu konfigurasi tambahan!
✍️ Menulis Unit Test Pertamamu dengan React Testing Library dan Jest
Oke, sekarang bagian yang seru! Mari kita buat komponen sederhana, lalu tulis test untuknya. Kita akan bikin komponen Counter — komponen yang biasa ada di tutorial React tapi kali ini kita test dengan benar.
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<h2>Hitungan: <span data-testid="count-value">{count}</span></h2>
<button onClick={() => setCount(count + 1)}>Tambah</button>
<button onClick={() => setCount(count - 1)}>Kurang</button>
</div>
);
}
export default Counter;
import { render, screen, fireEvent } from '@testing-library/react';
import Counter from './Counter';
describe('Counter Component', () => {
test('render hitungan awal 0', () => {
render(<Counter />);
const countEl = screen.getByTestId('count-value');
expect(countEl.textContent).toBe('0');
});
test('klik Tambah menaikkan hitungan', () => {
render(<Counter />);
fireEvent.click(screen.getByText('Tambah'));
expect(screen.getByTestId('count-value').textContent).toBe('1');
});
test('klik Kurang menurunkan hitungan', () => {
render(<Counter />);
fireEvent.click(screen.getByText('Kurang'));
expect(screen.getByTestId('count-value').textContent).toBe('-1');
});
});
# Output yang kamu harapkan:
✓ render hitungan awal 0 (15ms)
✓ klik Tambah menaikkan hitungan (8ms)
✓ klik Kurang menurunkan hitungan (6ms)
Test Suites: 1 passed, 1 total
Tests: 3 passed, 3 total
Perhatikan penggunaan data-testid di komponen. Ini adalah cara RTL mengambil elemen tanpa bergantung pada class CSS atau struktur DOM. Kalau styling kamu berubah, test tetap berjalan. Inilah filosofi inti RTL: test behavior, bukan implementation.
🔍 Query Methods & Best Practices React Testing Library
Salah satu kekuatan RTL ada di query methods — cara kamu "menemukan" elemen di dalam komponen yang di-render. Beda cara query = beda filosofi testing.
Hindari menggunakan getByClassName atau getById untuk elemen DOM. Ini membuat test kamu rapuh karena bergantung pada detail implementasi. Lebih suka gunakan getByRole, getByText, atau getByLabelText untuk query yang lebih aksesibel.
Contoh test async — ketika komponen melakukan fetch data:
test('menampilkan data user setelah fetch', async () => {
// Mock fetch API
global.fetch = jest.fn().mockResolvedValue({
json: () => Promise.resolve({ name: 'Saifi Ahmad' })
});
render(<UserProfile />);
// Tunggu elemen muncul secara async
const name = await screen.findByText('Saifi Ahmad');
expect(name).toBeInTheDocument();
});
Gunakan @testing-library/user-event dibanding fireEvent untuk simulasi interaksi yang lebih realistis. userEvent.type() mensimulasikan pengetikan karakter demi karakter seperti pengguna nyata, termasuk trigger semua event keyboard yang menyertai.
No comments:
Post a Comment