Penyiapan React Testing Library + Vitest/Jest
Pasang dan konfigurasikan Vitest/Jest dengan React Testing Library; gunakan jsdom, render komponen, dan kueri DOM seperti pengguna.
Penyiapan React Testing Library + Vitest/Jest adalah pelajaran React Academy gratis di CoddyKit. Ini adalah pelajaran 1 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.
Mengapa kombinasi alat ini
Tujuan: Uji komponen seperti cara pengguna berinteraksi dengannya.
- Pelaksana Vitest/Jest
- Lingkungan jsdom
- React Testing Library (RTL)
Instalasi dan lingkungan
Instalasi:
- npm i -D vitest @testing-library/react @testing-library/user-event jsdom
- Atur lingkungan pengujian ke jsdom
- Tambahkan skrip: test, test:watch
Komponen contoh untuk diuji
Komponen kecil ini menyediakan peran, nama, dan status yang jelas sehingga pengujian dapat menemukan komponennya.
<div id="root"></div>
Pratinjau: isi file pengujian
Pratinjau pengujian menggunakan RTL + Vitest. Isi file ditampilkan sebagai referensi.
<div id="root"></div>
Hal penting dalam konfigurasi
- Lingkungan: jsdom
- Penyiapan: tambahkan @testing-library/jest-dom jika diinginkan
- Skrip: "test", "test:watch"
Temukan seperti pengguna
Pencarian yang disarankan:
- getByRole / findByRole
- getByLabelText
- getByText
Gunakan ID pengujian hanya jika tidak ada pencarian yang dapat diakses dan sesuai.
Pemeriksaan panduan pencarian RTL
Ringkasan
Ringkasan: Instal Vitest/Jest + RTL, atur jsdom, tampilkan komponen, dan utamakan pencarian berdasarkan peran/label. Tambahkan user-event untuk interaksi yang realistis.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Penyiapan React Testing Library + Vitest/Jest” gratis?
Ya — teks lengkap “Penyiapan React Testing Library + Vitest/Jest” 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 “Penyiapan React Testing Library + Vitest/Jest”?
Pasang dan konfigurasikan Vitest/Jest dengan React Testing Library; gunakan jsdom, render komponen, dan kueri DOM seperti pengguna. 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 1 dari 3.
Berapa lama pelajaran “Penyiapan React Testing Library + Vitest/Jest” 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