Kueri, Peristiwa, Pernyataan — Formulir & UI Asinkron
Gunakan kueri getBy/findBy, user-event untuk mengetik/mengklik, dan pernyataan jest-dom. Uji formulir serta layar asinkron dengan percaya diri.
Kueri, Peristiwa, Pernyataan — Formulir & UI Asinkron adalah pelajaran React Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 3. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar React Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus React Academy mencakup 3 pelajaran total.
Pengujian yang berfokus pada pengguna
Tujuan: Lakukan pengujian seperti pengguna.
- Pencarian: getBy*/findBy*
- Peristiwa: user-event (klik, mengetik)
- Penegasan: jest-dom
Pencarian: pilih yang tepat
- getBy*: sinkron; gagal jika elemen tidak ditemukan
- findBy*: asinkron; menunggu
- queryBy*: mengembalikan null jika elemen tidak ditemukan
- Utamakan peran/label daripada ID pengujian
Contoh: formulir masuk yang mudah diakses
Formulir dengan label dan tombol kirim. Cocok untuk getByLabelText, getByRole, dan pengetikan oleh pengguna.
<div id="root"></div>
Contoh: daftar asinkron (memuat → item)
Simulasi pengambilan data asinkron: loader ditampilkan, lalu item dirender. Pengujian sebaiknya menggunakan findBy* atau waitFor.
<div id="root"></div>
Penegasan dan peristiwa
- toBeInTheDocument, toBeDisabled, toHaveTextContent
- Gunakan findBy* untuk UI asinkron
- Utamakan user-event daripada fireEvent
Pola dan hal yang perlu diwaspadai
Pola:
- Siapkan → Jalankan (user-event) → Tegaskan
- Asinkron: await findBy* atau waitFor
- Hindari batas waktu sembarang; jaga agar pengujian tetap cepat
Praktik terbaik penegasan asinkron
Ringkasan
Ringkasan: Utamakan pencarian berdasarkan peran/label, jalankan UI dengan user-event, dan lakukan penegasan dengan jest-dom. Untuk UI asinkron, gunakan await findBy* atau bungkus dengan waitFor.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Kueri, Peristiwa, Pernyataan — Formulir & UI Asinkron” gratis?
Ya — teks lengkap “Kueri, Peristiwa, Pernyataan — Formulir & UI Asinkron” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus React Academy, upgrade ke CoddyKit PRO. Kursus React Academy mencakup 3 pelajaran total.
Apa yang akan aku pelajari di “Kueri, Peristiwa, Pernyataan — Formulir & UI Asinkron”?
Gunakan kueri getBy/findBy, user-event untuk mengetik/mengklik, dan pernyataan jest-dom. Uji formulir serta layar asinkron dengan percaya diri. Kamu berlatih React Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai React Academy?
Tidak diperlukan pengalaman sebelumnya. React Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 3.
Berapa lama pelajaran “Kueri, Peristiwa, Pernyataan — Formulir & UI Asinkron” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran React Academy ini?
Ya. Setiap pelajaran React Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Penyiapan React Testing Library + Vitest/Jest
- Kueri, Peristiwa, Pernyataan — Formulir & UI Asinkron
- Menirukan Pengambilan Data & Pengatur Waktu