Belajar Jest - Testing React & UI Components

#Pendahuluan

Jest lahir dari ekosistem React dan tetap menjadi pasangan paling natural untuk menguji komponen. Episode 8 mengajarkan cara menguji UI components dengan kombinasi Jest dan React Testing Library — pendekatan yang berfokus pada perilaku yang terlihat pengguna, bukan detail implementasi internal.

Kalian akan belajar merender komponen, memeriksa output DOM, menguji event dan perubahan state, menangani UI yang memuat data secara async, serta menggabungkan snapshot testing untuk komponen. Semua dilakukan di lingkungan jsdom tanpa browser nyata, sehingga suite tetap cepat dan deterministik.

#Integrasi dengan React Testing Library

#Persiapan Environment

Untuk menguji React, ubah testEnvironment menjadi jsdom agar objek DOM tersedia. Install paket yang dibutuhkan:

Install React Testing Library

npm install --save-dev @testing-library/react @testing-library/jest-dom @testing-library/user-event

Paket @testing-library/react menyediakan fungsi render, @testing-library/jest-dom menambah matchers DOM seperti toBeInTheDocument, dan @testing-library/user-event meniru interaksi pengguna secara realistis.

Aktifkan matchers jest-dom

import "@testing-library/jest-dom";

Cukup import sekali di file setupFilesAfterEnv agar matchers tersedia di semua file test — detail konfigurasi ini akan dibahas di episode 11.

#Rendering Components dan Asserting DOM Output

#Render dan Query

Fungsi render memuat komponen ke dalam DOM virtual, lalu kalian memeriksa hasilnya dengan query seperti getByText dan getByRole:

Merender dan memeriksa output DOM

import { render, screen } from "@testing-library/react";
 
function Sapa({ nama }) {
  return <h1>Halo, {nama}</h1>;
}
 
test("menampilkan sapaan", () => {
  render(<Sapa nama="arif" />);
  expect(screen.getByText("Halo, arif")).toBeInTheDocument();
});

screen.getByText("Halo, arif") mencari elemen yang teksnya persis cocok, dan matcher toBeInTheDocument dari jest-dom memastikan elemen itu ada di DOM. Prioritaskan query yang menyerupai cara pengguna menemukan elemen — getByRole dan getByLabelText lebih baik daripada query berbasis class.

#Testing Events, Props, State Changes

#Menguji Interaksi Pengguna

Dengan user-event, kalian bisa mengklik, mengetik, dan menunggu reaksi komponen:

Menguji klik dan perubahan state

import userEvent from "@testing-library/user-event";
import { render, screen } from "@testing-library/react";
import { useState } from "react";
 
function Penghitung() {
  const [hitung, setHitung] = useState(0);
  return (
    <button onClick={() => setHitung((n) => n + 1)}>
      Ditekan {hitung} kali
    </button>
  );
}
 
test("klik menaikkan penghitung", async () => {
  const user = userEvent.setup();
  render(<Penghitung />);
 
  const tombol = screen.getByRole("button");
  await user.click(tombol);
  await user.click(tombol);
 
  expect(tombol).toHaveTextContent("Ditekan 2 kali");
});

userEvent.setup() membuat instance interaksi, lalu user.click(tombol) meniru klik nyata termasuk event mousedown dan mouseup. Assertion toHaveTextContent memeriksa bahwa state yang dirender benar-benar berubah setelah dua klik.

#Props dan Conditional Rendering

Uji perilaku yang berbeda dengan props berbeda. Contoh: tombol dinonaktifkan saat prop disabled bernilai true, atau teks berubah sesuai prop. Setiap kombinasi props yang bermakna layak menjadi satu test tersendiri.

#Menguji Async UI

#Menunggu Elemen Muncul

Komponen yang memuat data dari API biasanya menampilkan loading lalu hasilnya. Untuk menunggu, gunakan findBy yang mengembalikan promise:

Menunggu hasil async

import { render, screen } from "@testing-library/react";
 
async function AmbilData() {
  const data = await Promise.resolve({ pesan: "dimuat" });
  return <div>{data.pesan}</div>;
}
 
test("menampilkan data setelah dimuat", async () => {
  render(<AmbilData />);
  expect(screen.getByText("dimuat")).toBeInTheDocument();
});

Untuk komponen yang benar-benar melakukan fetch, kalian akan meng-mock fetch atau modul API — teknik yang akan kita bahas mendalam di episode 12. Untuk sekarang, ingat bahwa findByText menunggu secara internal sampai elemen muncul atau timeout, sehingga ideal untuk UI async.

#Snapshot Testing di React

#Merekam Struktur Komponen

Kombinasikan render dan snapshot untuk memantau perubahan struktur:

Snapshot output komponen

test("struktur kartu stabil", () => {
  const { container } = render(<Kartu judul="Berita" isi="Isi berita" />);
  expect(container).toMatchSnapshot();
});

Snapshot React menangkap seluruh DOM yang dirender. Gunakan secara selektif: snapshot untuk struktur yang jarang berubah, dan assertion eksplisit untuk perilaku interaktif. Kombinasi keduanya memberi proteksi menyeluruh tanpa membuat suite kaku.

#Penutup

Episode 8 membekali kalian pengujian UI components yang berpusat pada perilaku: integrasi React Testing Library, render dan query DOM, interaksi pengguna dengan user-event, penanganan UI async, serta snapshot untuk struktur komponen.

Inti yang harus dibawa pulang:

Gunakan testEnvironment: "jsdom" untuk menguji komponen React.
Query dengan getByRole dan getByText mengikuti cara pengguna melihat.
user-event meniru interaksi nyata; pakai setup() untuk instance baru.
State dan props diuji lewat assertion terhadap hasil render.
findBy menunggu elemen async muncul di DOM.
Snapshot komponen memantau struktur, assertion memeriksa perilaku.

Di episode 9 selanjutnya kita akan menangani TypeScript & Babel support — menjalankan Jest dengan TypeScript, mengonfigurasi ts-jest atau Babel, memetakan source paths dan module aliases, serta menguji kode yang bertipe dengan benar.