11 · Testing
Fase: 4 · Estimasi: 2–3 minggu · Prasyarat: 07 Framework
Kenapa ini penting
Test yang baik memberi keberanian untuk refactor. Test yang buruk (rapuh, lambat, menguji implementasi) justru menghambat. Skill utamanya bukan sintaks framework test, tapi memutuskan apa yang perlu diuji dan di level mana.
Peta konsep
Dasar
- Unit test: Vitest / Jest
- Component test: Testing Library (query berdasarkan role dan label)
- E2E: Playwright / Cypress
- Assertion, mock, spy
Menengah
- Testing pyramid vs testing trophy
- Test doubles: stub, mock, fake; network mocking dengan MSW
- Fake timers, testing async code
- Visual regression (Playwright screenshots, Chromatic)
- Coverage: manfaat dan jebakannya
Deep dive
- Flaky test: sumber (timing, shared state, animation) dan cara memberantasnya
- Contract testing antara front-end dan API
- Mutation testing (Stryker) untuk mengukur kualitas test
- Accessibility testing otomatis (axe-core)
Cara belajar
- Tulis test untuk
@chalidade/utilslalu ubah implementasinya. Mana yang gagal karena perilaku berubah, dan mana yang hanya karena detail implementasi? - Ganti semua query
getByTestIddi satu project dengangetByRole, lalu catat bug a11y yang ditemukan. - Buat satu test E2E Playwright, jalankan 50 kali (
--repeat-each=50), lalu perbaiki sampai tidak flaky.
Uji pemahaman
- Kenapa Testing Library mendorong query
getByRole? - Kapan mock justru membuat test tidak berguna?
- Coverage 100% tidak menjamin apa?
- Bagaimana Playwright menangani auto-waiting, dan kenapa
sleepdi test adalah tanda bahaya?
Proyek latihan
| Tingkat | Proyek | Yang dilatih |
|---|---|---|
| Dasar | Unit test util + component test form | Vitest, Testing Library |
| Menengah | Suite E2E untuk alur login–checkout dengan MSW dan Playwright | E2E, mocking |
| Deep | Mini test runner: describe/it/expect, hooks, reporter | Cara kerja runner |
Sumber primer
Toolkit terkait
packages/utils/src/index.test.ts: contoh test dengan fake timers