Daftar Isi Utama

• Lihat indeks lengkap di [01. Pengenalan]

Panduan ini untuk siapa

• Pembelajar yang ingin lebih pede saat refactor, merge, dan rilis
• Pemula yang masih bingung harus mulai ngetes dari mana
• Siapa pun yang mau test efektif tanpa bikin development jadi lambat

Apa yang akan Anda pelajari

• Perbedaan jelas unit, integration, dan E2E test
• Pola test praktis dengan Vitest atau Jest
• Cara menulis test React Testing Library yang fokus ke perilaku user

Mengapa topik ini penting

Testing itu safety net Anda. Tanpa testing, setiap perubahan terasa berisiko.

Testing yang baik menangkap regresi lebih awal, mengurangi cek manual berulang, dan bikin refactor jauh lebih aman. Di tim, ini langsung ngaruh ke kepercayaan saat rilis.

Konsep inti

Unit test

• Menguji satu fungsi/komponen secara terisolasi

Paling cocok untuk logic murni dan utility function.

Integration test

• Menguji interaksi beberapa bagian (misalnya form + validasi + submit)

Bagus untuk memastikan perilaku fitur berjalan sesuai ekspektasi.

E2E test

• Meniru alur pengguna pada aplikasi secara menyeluruh

Pakai E2E untuk alur bisnis paling kritis, bukan semua skenario kecil.

Panduan langkah demi langkah

Langkah 1 — Mulai dari utility test

Mulai dari fungsi murni dulu. Cepat ditulis, cepat dijalankan, cepat di-debug.

Langkah 2 — Tambahkan test interaksi komponen

Uji hal yang benar-benar dilakukan user: mengetik, klik, submit, dan membaca feedback.

Langkah 3 — Tetapkan target cakupan minimum

Tetapkan coverage minimum untuk alur yang paling penting dulu.

Target utamanya confidence, bukan sekadar angka coverage tinggi.

Contoh praktis

Contoh 1 — Utility function test

it("formats score", () => {
	expect(formatScore("Nina", 90)).toBe("Nina: 90");
});

Tip:

• Utility test adalah cara tercepat membangun kebiasaan testing.

Contoh 2 — Test interaksi React

• Render komponen form
• Isi input dan klik submit
• Verifikasi muncul pesan sukses atau error

Aturan fokus:

• Prioritaskan query yang aksesibel dan merepresentasikan cara user berinteraksi.

Kesalahan umum dan cara menghindarinya

• Terlalu fokus ke implementation detail -> uji perilaku yang terlihat user
• Selector test rapuh -> gunakan query aksesibel (getByRole, getByLabelText)
• Skenario gagal diabaikan -> tambahkan assertion untuk error, empty, dan loading
• Ingin mengetes semuanya sekaligus -> prioritaskan dulu alur kritis

Mini Project

• Tambahkan test di app sebelumnya untuk:
• satu unit test utility,
• satu test interaksi form,
• satu test failure path API.

Bonus:

• Tambahkan satu E2E smoke test untuk satu user journey utama.

Latihan cepat

• Tulis satu unit test untuk utility
• Tulis satu test interaksi komponen
• Tambahkan satu assertion untuk failure path
• Buat daftar “must-test” untuk project Anda saat ini

Ringkasan utama

• Testing memberi rasa aman saat perubahan cepat
• Test berbasis perilaku biasanya lebih tahan terhadap refactor internal
• Coverage kecil tapi fokus pada alur kritis lebih bernilai daripada mengejar 100%

Langkah berikutnya

Lanjut ke [16. Kualitas Kode dan Tooling].