Advanced · Level 13: TestingAdvanced60 menitBahasa Indonesia

Testing Mindset

Memilih test yang melindungi behavior penting tanpa mengikat test pada detail implementasi component.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Menjelaskan tujuan test sebagai pemeriksaan contract behavior
Membedakan behavior user-visible dari detail implementasi
Memilih test target yang memberi confidence nyata
Menghindari test yang hanya memeriksa internal state atau class name

Testing MindsetBehavior TestingReactQuality

Isi lesson

6 blok

1.
Test melindungi janji feature, bukan cara internalnya bekerjaBelum selesaiWajib
2.
Test output function, bukan variabel sementaraBelum selesaiWajib
3.
Coding practiceBelum selesaiWajib
4.
Cek pemahamanBelum selesaiWajib
5.
Coverage tinggi bukan tujuan tunggalBelum selesaiWajib
6.
RingkasanBelum selesaiWajib

Test melindungi janji feature, bukan cara internalnya bekerja

Wajib

Test yang berguna menjawab pertanyaan tentang behavior: apakah duration ditampilkan dengan benar, apakah button bookmark mengubah informasi yang dapat dilihat user, atau apakah form memberi pesan ketika data tidak lengkap. Test yang rapuh sering memeriksa detail yang user tidak kenal, seperti jumlah useState, nama helper internal, atau struktur div yang boleh berubah tanpa mengubah pengalaman user. Mulailah dari contract feature. Jika implementasi boleh direfaktor tetapi user masih menerima hasil yang sama, test seharusnya tetap lulus.

Bagian ini memengaruhi progres lesson.

Test output function, bukan variabel sementara

Wajib

import { describe, expect, it } from "vitest";

function getCourseStatus(completedLessons: number, totalLessons: number) {
  return completedLessons === totalLessons ? "Selesai" : "Sedang dipelajari";
}

describe("getCourseStatus", () => {
  it("returns Selesai when every lesson is completed", () => {
    expect(getCourseStatus(8, 8)).toBe("Selesai");
  });
});

Test ini menyatakan input dan output yang dijanjikan function. Ia tidak peduli apakah implementation memakai if, ternary, atau helper lain. Nama test menjelaskan behavior yang rusak bila assertion gagal, sehingga output terminal lebih mudah dibaca.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Write course status behavior test

Lengkapi test Vitest yang memeriksa output status course, bukan detail internal function. Preview tidak menjalankan 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 test yang paling melindungi behavior bookmark dari sudut pandang user?

Progres lesson naik setelah jawaban benar.

Kesalahan umum

Wajib

Coverage tinggi bukan tujuan tunggal

Angka coverage dapat membantu menemukan area yang belum disentuh, tetapi tidak membuktikan test melindungi behavior penting. Satu test user journey yang tepat bisa lebih bernilai daripada banyak assertion pada implementation detail. Untuk module ini, pilih behavior yang berisiko rusak dan mudah dipahami dari nama test-nya.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib

Test yang baik memeriksa contract behavior yang benar-benar penting.
User-visible output dan interaction lebih stabil daripada detail implementation.
Nama test perlu menjelaskan apa yang gagal, bukan nama helper yang dipanggil.
Coverage adalah sinyal tambahan, bukan bukti kualitas test.
Berikutnya, Vitest menyediakan runner dan assertion untuk menjalankan test kecil di project lokal.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Test melindungi janji feature, bukan cara internalnya bekerja.

Memuat progres Review module