FluentStack

Uji Kompetensi Unit and Component Testing

Mode tersedia: dark, light, paper
MasukDaftar
Advanced · Level 13: TestingAdvanced80 menitBahasa Indonesia

Uji Kompetensi Unit and Component Testing

Checkpoint untuk menilai kesiapan menulis test behavior-focused untuk function dan component React kecil.

StatusMemuat progres
ReadinessMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Yang dicek

  • Memilih behavior penting untuk diuji pada component interaktif
  • Menggabungkan render, user-event, assertion, dan accessible query
  • Membedakan test yang memberi confidence dari detail implementation
  • Menentukan QA test yang perlu dijalankan di local project
TestingVitestReact Testing LibraryAccessibilityReadiness Checkpoint

Isi lesson

6 blok
  1. 1.
    Checkpoint: test harus memberi confidence pada behavior pentingBelum selesaiWajib
  2. 2.
    QuizBelum selesaiWajib
  3. 3.
    Coding practiceBelum selesaiWajib
  4. 4.
    Writing practiceBelum selesaiWajib
  5. 5.
    Gunakan docs untuk menjalankan dan membaca test lokalBelum selesaiWajib
  6. 6.
    RingkasanBelum selesaiWajib

Checkpoint: test harus memberi confidence pada behavior penting

Wajib

Pada module ini, kamu tidak diminta mengejar banyak test atau semua baris code. Yang diuji adalah contract kecil tetapi penting: function memberi output yang tepat, component menampilkan informasi yang benar, user dapat berinteraksi lewat control yang dapat ditemukan, dan hasil action terlihat di UI. Query yang aksesibel membantu test tetap dekat dengan pengalaman user. Nilai apakah test menemukan button seperti user, menjalankan click melalui user-event, lalu memeriksa perubahan status.

Bagian ini memengaruhi progres lesson.

Quiz

Wajib

Uji Kompetensi Unit and Component Testing

Jawab pertanyaan satu per satu. Kamu bisa ulang quiz jika belum mencapai target lulus.

Target lulus

70/100

Skor terbaik

0/100

Status

Belum dikerjakan

Blok ini wajib untuk menyelesaikan lesson. Progres quiz naik setelah skor mencapai target lulus.

Pertanyaan 1 dari 5

Target lulus: 70

Mana yang merupakan behavior contract terbaik untuk test button bookmark?

Coding practice

WajibDibuka di workspace khusus

Build bookmark component behavior test

Lengkapi checkpoint test behavior bookmark dengan accessible query, user event, dan assertion pada status yang user lihat. 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.

6 cek otomatis5 checklist
Belum selesaiBuka practice

Writing practice

Wajib

Latihan menulis

Tulis implementation note untuk test component bookmark atau profile. Jelaskan behavior yang kamu lindungi, query yang dipilih dan alasannya, interaction yang disimulasikan bila ada, assertion setelah action, satu detail implementation yang sengaja tidak kamu test, serta command atau output yang akan kamu cek di local project. Gunakan istilah yang spesifik terhadap feature.

Tulis draft dulu sebelum menandai writing practice selesai.

Draft kosong

0/500 karakter

Checklist panduan

Checklist ini hanya panduan. Kamu tidak harus mencentang semuanya.

Blok ini wajib untuk menyelesaikan lesson.

Documentation Bridge

Wajib

Gunakan docs untuk menjalankan dan membaca test lokal

Buka dokumentasi sesuai tool yang benar-benar dipakai project-mu. Fokus pada satu test yang dapat dijalankan sebelum menambah mock, coverage, atau setup kompleks.

Vitest

Getting Started

Fokus baca

  • Install dependency dan test script dasar.
  • Penamaan file test serta cara menjalankan test.
  • Membaca output assertion yang gagal.

Abaikan dulu

  • Coverage target dan browser mode.
  • Mocking API serta workspace configuration kompleks.
Buka dokumentasi

Testing Library

About Queries

Fokus baca

  • Prioritas query berdasarkan role, label, dan accessible name.
  • Perbedaan get, query, dan find secara garis besar.
  • Mengapa screen cocok untuk mencari output yang terlihat.

Abaikan dulu

  • Custom query utilities.
  • Detail asynchronous API di luar feature test-mu.
Buka dokumentasi

Testing Library

User Event Introduction

Fokus baca

  • Peran userEvent untuk interaction user.
  • Alasan interaction dapat perlu await.
  • Perbedaan umum user-event dan event low-level.

Abaikan dulu

  • Interaction browser yang belum digunakan component-mu.
  • Cross-framework setup detail.
Buka dokumentasi

Aksi setelah membaca

Di Local React App atau Local Next.js App, pilih satu helper function dan satu component. Jalankan satu unit test serta satu component interaction test, lalu catat behavior yang dilindungi dan satu failure yang kamu pahami. Jangan tandai selesai hanya karena struktur test di practice workspace sudah lolos.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib
  • Test behavior-focused melindungi contract feature, bukan detail internalnya.
  • Vitest menjalankan test lokal dan memberi output assertion yang perlu dibaca.
  • React Testing Library merender component lalu mencari UI yang tersedia untuk user.
  • user-event menguji interaction lewat alur yang dekat dengan pemakaian nyata.
  • Accessible queries membuat test sekaligus memberi sinyal kualitas markup. Berikutnya, Integration and API Mocking memperluas test ke data serta response API.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian wajib checkpoint ini

Lanjutkan blok wajib berikutnya: Checkpoint: test harus memberi confidence pada behavior penting.

Memuat progresReview module