Advanced · Level 13: TestingAdvanced65 menitBahasa Indonesia

Integration Test Scope

Memilih satu flow feature yang memberi confidence saat component, request data, dan output UI bekerja bersama.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Membedakan integration test dari unit dan component test kecil
Memilih satu flow feature yang memberi confidence nyata
Menentukan UI state yang penting dalam test async
Menghindari test yang mengulang detail internal setiap component

Integration TestingTest ScopeAsync UIQuality

Isi lesson

6 blok

1.
Uji flow feature ketika beberapa bagian perlu bekerja bersamaBelum selesaiWajib
2.
Satu flow katalog yang layak diujiBelum selesaiWajib
3.
Coding practiceBelum selesaiWajib
4.
Cek pemahamanBelum selesaiWajib
5.
Jangan jadikan satu test sebagai seluruh aplikasiBelum selesaiWajib
6.
RingkasanBelum selesaiWajib

Uji flow feature ketika beberapa bagian perlu bekerja bersama

Wajib

Unit test cocok untuk contract function kecil. Component test cocok untuk satu component dan satu interaction. Integration test mengambil satu langkah lebih jauh: render feature, biarkan feature meminta data lewat batas network yang dimock, lalu periksa state yang user lihat. Contohnya bukan menguji setiap CourseCard satu per satu lagi, melainkan memastikan katalog course menampilkan loading, menerima daftar course, dan memberi pesan yang berguna ketika request gagal. Scope yang baik cukup lebar untuk melindungi flow, tetapi tidak berubah menjadi simulasi seluruh aplikasi.

Bagian ini memengaruhi progres lesson.

Satu flow katalog yang layak diuji

Wajib

tsx

it("shows courses returned by the API", async () => {
  render(<CourseCatalog />);

  expect(screen.getByText("Memuat course...")).toBeInTheDocument();

  expect(
    await screen.findByRole("heading", { name: "Belajar Flexbox" }),
  ).toBeInTheDocument();
});

Test ini tidak perlu tahu apakah CourseCatalog memakai useEffect, custom hook, atau helper mapping tertentu. Contract-nya adalah flow yang terlihat: feature mulai memuat lalu menampilkan course dari response. Pada lesson berikutnya, response tersebut akan disiapkan melalui handler MSW, bukan dengan memanggil setter atau mock function internal component.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Choose course catalog integration boundary

Lengkapi test flow CourseCatalog yang memeriksa loading dan course user-visible. Preview tidak menjalankan request atau Vitest.

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

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Manakah scope integration test yang paling tepat untuk feature daftar course?

Progres lesson naik setelah jawaban benar.

Kesalahan umum

Wajib

Jangan jadikan satu test sebagai seluruh aplikasi

Satu test yang mendaftarkan user, memuat semua dashboard, mengubah profile, lalu membuat bookmark akan sulit dibaca dan sulit menunjukkan penyebab failure. Pilih satu user goal, satu response data, serta state UI yang paling penting. Flow lintas aplikasi yang benar-benar kritis akan dibahas pada strategi E2E, bukan dipaksakan ke integration test ini.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib

Integration test memeriksa flow feature ketika beberapa bagian bekerja bersama.
Pilih user goal dan state UI yang penting, bukan semua component atau styling.
Test dapat memeriksa loading lalu output success atau error dari response yang dimock.
Backend asli dan credential tidak diperlukan untuk scope ini.
Berikutnya, MSW memberi cara untuk menyiapkan response pada batas network.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Uji flow feature ketika beberapa bagian perlu bekerja bersama.

Memuat progres Review module