Belajar ReactJS - Testing & Quality

#Pendahuluan

Kode yang tidak diuji berubah menjadi kode yang ditakuti. Episode 16 membuat testing menjadi bagian alami dari alur kerja React kalian, bukan kewajiban yang ditunda-tunda.

Kita membangun piramida testing dari bawah ke atas: unit testing dengan Jest dan React Testing Library, snapshot testing, integration testing untuk perilaku antar komponen, dan E2E testing dengan Cypress atau Playwright untuk alur pengguna nyata di browser.

#Unit Testing dengan Jest dan React Testing Library

#Setup Vitest di Proyek Vite

Untuk proyek Vite, Vitest adalah pasangan alami karena memakai konfigurasi Vite yang sama. Install dan tambahkan script:

npm install -D vitest @testing-library/react @testing-library/jest-dom jsdom

{
  "scripts": {
    "test": "vitest",
    "test:run": "vitest run"
  }
}

npm install -D vitest ... memasang framework test beserta Testing Library. npm run test menjalankan vitest dalam mode watch; vitest run sekali jalan di CI.

#Menulis Unit Test Pertama

React Testing Library menguji perilaku dari sudut pandang pengguna — render komponen, interaksi, dan assert hasil:

Unit test komponen

import { render, screen, fireEvent } from "@testing-library/react"
import { describe, it, expect } from "vitest"
import Counter from "./Counter.jsx"
 
describe("Counter", () => {
  it("menambah angka saat tombol diklik", () => {
    render(<Counter />)
    const tombol = screen.getByRole("button")
    fireEvent.click(tombol)
    expect(screen.getByText("1")).toBeTruthy()
  })
})

screen.getByRole("button") mencari elemen lewat peran aksesibilitasnya, bukan oleh teks atau kelas — meniru cara pengguna dan screen reader menemukan elemen. fireEvent.click mensimulasikan klik, lalu expect memeriksa hasilnya.

#Snapshot Testing

#Memakai Snapshot dengan Bijak

Snapshot testing menyimpan output serialisasi komponen dan membandingkannya di test berikutnya. Menulisnya semudah satu baris:

Snapshot sederhana

it("konsisten dengan snapshot", () => {
  const { container } = render(<Profil nama="Arman" />)
  expect(container).toMatchSnapshot()
})

expect(container).toMatchSnapshot() membuat file snapshot di penyimpanan pertama kali, lalu membandingkannya setiap run. Snapshot sangat berguna untuk mendeteksi perubahan markup tak disengaja — misalnya class CSS yang bergeser.

#Kapan Harus Berhati-hati

Snapshot mudah menghasilkan false positive: perubahan kecil yang tidak signifikan membuat test gagal dan developer terbiasa update snapshot tanpa melihat. Gunakan snapshot untuk komponen yang stabil, dan gabungkan dengan assert perilaku — bukan menggantikannya.

#Integration Testing dan Component Behavior

#Menguji Interaksi antar Komponen

Integration test menggabungkan beberapa komponen dan menguji alurnya bersama. Contoh: form login yang memanggil handler dan menampilkan pesan:

Integration test form

import { render, screen, fireEvent, waitFor } from "@testing-library/react"
 
it("menampilkan error saat login gagal", async () => {
  render(<FormLogin />)
 
  fireEvent.change(screen.getByLabelText(/email/i), {
    target: { value: "salah@contoh.com" },
  })
  fireEvent.click(screen.getByRole("button", { name: /masuk/i }))
 
  await waitFor(() => {
    expect(screen.getByText(/kredensial salah/i)).toBeTruthy()
  })
})

fireEvent.change mengisi input, klik tombol memicu submit, lalu waitFor menunggu hasil async. Integration test ini memastikan form, validasi, dan handler bekerja sebagai satu kesatuan.

#Pilih Query yang Dekat dengan Pengguna

Prioritas query di Testing Library: getByRole dan getByLabelText lebih baik daripada getByTestId. Query berbasis peran memaksa komponen punya aksesibilitas yang baik, dan test tidak rapuh terhadap perubahan class atau markup.

#E2E Testing dengan Cypress atau Playwright

#Playwright: End-to-End di Browser Nyata

Unit dan integration test tidak memastikan seluruh alur bekerja. E2E menjalankan aplikasi sungguhan di browser. Playwright adalah pilihan modern:

npm init playwright@latest

Test E2E Playwright

import { test, expect } from "@playwright/test"
 
test("login lalu melihat dashboard", async ({ page }) => {
  await page.goto("http://localhost:5173/login")
  await page.fill("#email", "admin@contoh.com")
  await page.fill("#password", "rahasia123")
  await page.click("button:has-text('Masuk')")
  await expect(page).toHaveURL(/dashboard/)
})

page.goto membuka aplikasi sungguhan, page.fill mengisi form, dan expect(page).toHaveURL memastikan navigasi sukses. E2E menguji hal yang tidak bisa dijangkau unit test: routing, rendering nyata, dan interaksi lintas halaman.

#Kapan E2E, Kapan Unit

Jaga piramida tetap benar: banyak unit test cepat, sedikit integration test, dan sedikit E2E yang lambat namun paling meyakinkan. Jalankan E2E di CI, bukan di setiap save.

#Penutup

Episode 16 membangun budaya kualitas: unit test dengan Vitest dan React Testing Library, snapshot testing untuk deteksi regresi markup, integration testing untuk perilaku antar komponen, dan E2E dengan Playwright untuk alur nyata di browser.

Inti yang harus dibawa pulang:

• Vitest dan React Testing Library adalah pasangan standar untuk proyek Vite.
• Prioritaskan query berbasis peran: getByRole, getByLabelText.
• Snapshot menangkap perubahan markup tak disengaja, tapi bukan pengganti assert.
• Integration test memastikan komponen bekerja bersama.
• E2E dengan Playwright menguji aplikasi sungguhan di browser.
• Jaga piramida: banyak unit test, sedikit E2E.

Di episode 17 selanjutnya kita akan membahas accessibility & UX — ARIA roles, navigasi keyboard, dan focus management, semantic HTML dan form yang aksesibel, responsive design dengan mobile-first, serta dasar internationalization. Aplikasi kalian akan terbuka untuk semua orang.