Bab 11: Testing Komponen

Memastikan komponen Anda bekerja sesuai harapan dengan Jest & React Testing Library.

Mengapa Testing Penting?

Menulis tes untuk kode Anda mungkin terasa seperti pekerjaan tambahan, tetapi ini memberikan banyak keuntungan jangka panjang:

  • Mencegah Regresi: Memastikan fitur yang sudah ada tidak rusak saat Anda menambahkan fitur baru.
  • Meningkatkan Kepercayaan Diri: Anda bisa melakukan *refactoring* atau mengubah kode dengan lebih percaya diri.
  • Dokumentasi Hidup: Tes berfungsi sebagai dokumentasi tentang bagaimana sebuah komponen seharusnya berperilaku.

Alat Bantu Kita

Ekosistem React memiliki dua alat utama untuk testing:

Jest

Sebuah *test runner* dari Facebook. Jest menyediakan lingkungan untuk menjalankan tes, membuat *assertions* (memastikan sesuatu benar), dan melaporkan hasilnya.

React Testing Library (RTL)

Sebuah library yang membantu merender komponen Anda dalam lingkungan tes dan berinteraksi dengannya seperti yang dilakukan pengguna (misalnya, mengklik tombol, mengetik di input).

Menulis Tes Pertama

Mari kita lihat contoh bagaimana kita bisa menulis tes untuk komponen `Counter` sederhana dari Bab 2.

1. Komponen yang Akan Dites

Ini adalah komponen `Counter` sederhana yang akan kita uji.

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Jumlah: {count}</p>
      <button onClick={() => setCount(count + 1)}>Tambah</button>
    </div>
  );
}

2. Kode Tes (`Counter.test.js`)

File tes biasanya diletakkan di samping file komponen dengan ekstensi `.test.js`. React Testing Library berfokus pada pengujian dari perspektif pengguna.

import { render, screen, fireEvent } from '@testing-library/react';
import Counter from './Counter';

// Mendeskripsikan kumpulan tes untuk komponen Counter
test('renders counter and increments on click', () => {
  // 1. Render komponen di dalam lingkungan tes
  render(<Counter />);
  
  // 2. Cari elemen di layar (seperti yang dilihat pengguna)
  const countElement = screen.getByText(/Jumlah: 0/i);
  const buttonElement = screen.getByRole('button', { name: /Tambah/i });
  
  // 3. Buat assertion (penegasan)
  // Memastikan elemen-elemen tersebut ada di dokumen
  expect(countElement).toBeInTheDocument();
  expect(buttonElement).toBeInTheDocument();
  
  // 4. Simulasikan interaksi pengguna (mengklik tombol)
  fireEvent.click(buttonElement);
  
  // 5. Buat assertion baru untuk memastikan state berubah
  // Cari lagi elemen teks, sekarang harus menampilkan "Jumlah: 1"
  const updatedCountElement = screen.getByText(/Jumlah: 1/i);
  expect(updatedCountElement).toBeInTheDocument();
});