Advanced · Level 13: TestingAdvanced75 menitBahasa Indonesia

MSW Basics

Menulis handler MSW sederhana untuk memberi response API yang dapat dipakai feature test secara deterministik.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Menjelaskan mengapa mock di network boundary lebih berguna daripada mock setiap helper
Mengenali http.get dan HttpResponse.json pada handler MSW
Menulis response success kecil yang mudah dibaca
Membedakan mock response dari bukti bahwa backend asli sehat

MSWNetwork BoundaryAPI MockingIntegration Testing

Isi lesson

5 blok

1.
Mock response di batas network, bukan di dalam setiap componentBelum selesaiWajib
2.
Handler success untuk endpoint courseBelum selesaiWajib
3.
Coding practiceBelum selesaiWajib
4.
Mock API bukan health check backendBelum selesaiWajib
5.
RingkasanBelum selesaiWajib

Mock response di batas network, bukan di dalam setiap component

Wajib

MSW atau Mock Service Worker mencegat request pada batas network lalu memberi response yang kamu tentukan. Dengan begitu, CourseCatalog tetap memanggil fetch seperti saat aplikasi berjalan, tetapi test tidak bergantung pada server yang sedang online. Pendekatan ini membantu test tetap dekat dengan alur feature dan tidak perlu mengetahui helper internal mana yang dipanggil component. Handler harus kecil, jelas, dan hanya memuat data yang dibutuhkan scenario test.

Bagian ini memengaruhi progres lesson.

Handler success untuk endpoint course

Wajib

import { http, HttpResponse } from "msw";

export const handlers = [
  http.get("/api/courses", () => {
    return HttpResponse.json({
      courses: [{ id: "flexbox", title: "Belajar Flexbox" }],
    });
  }),
];

http.get menyatakan request yang akan direspons. Handler ini tidak mengubah component dan tidak melakukan request ke backend asli. Ia hanya menyiapkan response untuk scenario test. Pada setup lokal, handler tersebut perlu dihubungkan ke server MSW sesuai dokumentasi dan test environment project-mu.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Mock course catalog API response

Tulis handler MSW success untuk GET /api/courses dengan response course yang kecil dan mudah dibaca. Preview tidak mengaktifkan 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.

4 cek otomatis5 checklist

Belum selesaiBuka practice

Peringatan

Wajib

Mock API bukan health check backend

Handler success membuat test UI deterministik, tetapi tidak membuktikan endpoint production tersedia, schema backend terbaru, atau authorization provider bekerja. Gunakan integration test untuk confidence pada behavior frontend terhadap response yang telah disepakati. Gunakan contract check, environment staging, atau observability production untuk pertanyaan yang berbeda.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib

MSW merespons request pada network boundary tanpa mengubah implementation component.
Handler http.get dan HttpResponse.json cukup untuk scenario REST success awal.
Gunakan mock data kecil agar intent test mudah dibaca.
Setup MSW dan output runner tetap harus diverifikasi di local project.
Berikutnya, handler success dan failure dipakai untuk menguji state API yang terlihat user.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Mock response di batas network, bukan di dalam setiap component.

Memuat progres Review module