0Pricing
Sveltejs Academy · Pelajaran

@testing-library/svelte: render dan fireEvent

Render komponen dalam pengujian, kueri DOM, dan simulasikan interaksi pengguna.

@testing-library/svelte: render dan fireEvent adalah pelajaran Sveltejs Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. 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 Sveltejs Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Sveltejs Academy mencakup 4 pelajaran total.

Testing Library

@testing-library/svelte menyediakan utilitas untuk merender komponen dan berinteraksi dengannya seperti pengguna.

Perenderan

Pasang komponen ke dalam DOM virtual.

import { render } from "@testing-library/svelte";
const { getByText } = render(MyComp, { props: { name: "Ada" } });

Metode Kueri

Gunakan getByText, getByRole, dan getByLabelText untuk menemukan elemen seperti yang dilakukan pengguna.

fireEvent

Simulasikan interaksi pengguna: click, masukan, dan kirim.

import { fireEvent } from "@testing-library/svelte";
await fireEvent.click(getByRole("button"));

Pustaka user-event

Untuk interaksi yang lebih realistis (mengetik dan navigasi papan ketik), gunakan @testing-library/user-event.

Pembaruan Asinkron

Setelah interaksi, tunggu tugas mikro agar pembaruan Svelte selesai diproses.

Penegasan

Gunakan expect dengan pencocok jest-dom seperti toBeInTheDocument dan toHaveAttribute.

expect(getByText("Hello, Ada!")).toBeInTheDocument();

Properti Komponen

Berikan properti sebagai argumen kedua kepada render.

Peristiwa Komponen

Uji pengirim peristiwa dengan memberikan mata-mata sebagai properti callback.

Snapshot DOM

Ambil snapshot HTML yang dirender untuk pengujian kemunduran.

Praktik Terbaik

Lakukan pengujian dari sudut pandang pengguna. Hindari menguji keadaan internal secara langsung.

Pemeriksaan Singkat

Apa yang dilakukan render?

Ringkasan

Gunakan render + fireEvent + jest-dom untuk menguji komponen Svelte seperti interaksi pengguna nyata.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “@testing-library/svelte: render dan fireEvent” gratis?

Ya — teks lengkap “@testing-library/svelte: render dan fireEvent” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Sveltejs Academy, upgrade ke CoddyKit PRO. Kursus Sveltejs Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “@testing-library/svelte: render dan fireEvent”?

Render komponen dalam pengujian, kueri DOM, dan simulasikan interaksi pengguna. Kamu berlatih Sveltejs 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 Sveltejs Academy?

Tidak diperlukan pengalaman sebelumnya. Sveltejs 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 4.

Berapa lama pelajaran “@testing-library/svelte: render dan fireEvent” 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 Sveltejs Academy ini?

Ya. Setiap pelajaran Sveltejs 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

  1. Penyiapan Vitest untuk Proyek Svelte
  2. @testing-library/svelte: render dan fireEvent
  3. Menguji Store dan Reaktivitas
  4. Membuat Mock Modul dan Fetch
← Kembali ke Sveltejs Academy