Loading, Error, and Success API States
Menguji state loading, success, dan error yang user lihat saat feature memuat response API.
Tujuan belajar
- Menentukan state API yang penting untuk sebuah feature
- Memakai findBy untuk output async yang muncul setelah response
- Menguji loading sebelum response success tersedia
- Menguji error UI dari response failure yang dimock
Isi lesson
6 blok- 1.User mengalami perubahan state, bukan hanya response JSONBelum selesaiWajib
- 2.Periksa loading lalu course dari response successBelum selesaiWajib
- 3.Coding practiceBelum selesaiWajib
- 4.Cek pemahamanBelum selesaiWajib
- 5.Jangan hanya menguji happy pathBelum selesaiWajib
- 6.RingkasanBelum selesaiWajib
User mengalami perubahan state, bukan hanya response JSON
WajibResponse API tidak langsung terlihat oleh user. Yang terlihat adalah loading indicator, daftar yang berhasil dimuat, empty state, atau error message beserta action berikutnya. Karena response bersifat async, assertion success biasanya perlu menunggu UI muncul. Testing Library menyediakan findBy untuk element yang diharapkan muncul kemudian. Jangan menambah delay acak agar test lulus; buat scenario response jelas, tunggu output yang relevan, lalu baca error test ketika output itu tidak muncul.
Bagian ini memengaruhi progres lesson.
Periksa loading lalu course dari response success
Wajibit("shows courses after a successful response", async () => {
render(<CourseCatalog />);
expect(screen.getByText("Memuat course...")).toBeInTheDocument();
expect(
await screen.findByRole("heading", { name: "Belajar Flexbox" }),
).toBeInTheDocument();
});getByText cocok untuk loading yang sudah ada setelah render. findByRole mengembalikan Promise dan menunggu heading course muncul setelah request selesai. Untuk scenario failure, handler dapat memberi status 500 lalu test mencari alert atau error message yang benar-benar membantu user.
Bagian ini memengaruhi progres lesson.
Coding practice
WajibDibuka di workspace khususTest course catalog API states
Uji CourseCatalog dengan MSW success dan failure response, lalu periksa loading, course, dan alert yang user lihat. Preview tidak menjalankan server MSW.
Tujuan awal: Fokus di tab TSX.
Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.
Tombol selesai aktif setelah semua validasi wajib lolos.
Cek pemahaman
WajibJawab duluCek pemahaman singkat
Kapan findByRole lebih tepat daripada getByRole pada test API?
Progres lesson naik setelah jawaban benar.
Kesalahan umum
WajibJangan hanya menguji happy path
Feature data yang hanya diuji dengan success response dapat tetap gagal saat request error atau response kosong. Pilih error UI yang memang memberi keputusan bagi user, misalnya pesan gagal memuat dan button Coba lagi bila feature memilikinya. Tidak semua state perlu masuk ke satu test; satu scenario success dan satu scenario failure yang jelas sering lebih mudah dirawat.
Bagian ini memengaruhi progres lesson.
Ringkasan
Wajib- Loading, success, error, dan empty state adalah contract UI dari flow API.
- Gunakan getBy untuk output yang langsung ada dan findBy untuk output async yang muncul.
- Mock response success dan failure secara terpisah agar intent scenario jelas.
- Jangan memakai delay acak untuk menutupi assertion yang salah.
- Berikutnya, prinsip mock yang sama dipakai untuk UI yang session-aware tanpa auth backend asli.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: User mengalami perubahan state, bukan hanya response JSON.