@testing-library/svelte: render ve fireEvent
Testlerde bileşenleri işleyin, DOM'u sorgulayın ve kullanıcı etkileşimlerini benzetin.
@testing-library/svelte: render ve fireEvent, CoddyKit'te ücretsiz bir Sveltejs Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Sveltejs Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Sveltejs Academy kursu toplamda 4 dersten oluşur.
Testing Library
@testing-library/svelte, Component'leri oluşturmak ve onlarla bir kullanıcı gibi etkileşim kurmak için yardımcı programlar sağlar.
render
Bir Component'i sanal DOM'a bağlayın.
import { render } from "@testing-library/svelte";
const { getByText } = render(MyComp, { props: { name: "Ada" } });Sorgu Yöntemleri
Ögeleri bir kullanıcının bulacağı şekilde bulmak için getByText, getByRole ve getByLabelText kullanın.
fireEvent
Kullanıcı etkileşimlerini benzetin: click, input, submit.
import { fireEvent } from "@testing-library/svelte";
await fireEvent.click(getByRole("button"));user-event Kitaplığı
Daha gerçekçi etkileşimler (yazma, klavyeyle gezinme) için @testing-library/user-event kullanın.
Zaman Uyumsuz Güncellemeler
Etkileşimden sonra Svelte güncellemelerinin tamamlanması için mikro görevleri await ile bekleyin.
Doğrulamalar
toBeInTheDocument ve toHaveAttribute gibi jest-dom eşleştiricileriyle expect kullanın.
expect(getByText("Hello, Ada!")).toBeInTheDocument();Component Özellikleri
Özellikleri render işlevine ikinci bağımsız değişken olarak geçirin.
Component Olayları
Bir spy'ı geri çağırma özelliği olarak geçirerek olay göndericilerini test edin.
Anlık Görüntü DOM'u
Gerileme testi için oluşturulan HTML'nin anlık görüntüsünü alın.
En İyi Uygulama
Kullanıcının bakış açısından test yapın. İç durumu doğrudan test etmekten kaçının.
Hızlı Kontrol
render ne yapar?
Özet
Svelte Component'lerini gerçek kullanıcı etkileşimleri gibi test etmek için render + fireEvent + jest-dom kullanın.
Sıkça Sorulan Sorular
“@testing-library/svelte: render ve fireEvent” dersi ücretsiz mi?
Evet — “@testing-library/svelte: render ve fireEvent” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Sveltejs Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Sveltejs Academy kursu toplamda 4 dersten oluşur.
“@testing-library/svelte: render ve fireEvent” dersinde ne öğreneceğim?
Testlerde bileşenleri işleyin, DOM'u sorgulayın ve kullanıcı etkileşimlerini benzetin. Sveltejs Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Sveltejs Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Sveltejs Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.
“@testing-library/svelte: render ve fireEvent” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Sveltejs Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Sveltejs Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Svelte Projeleri için Vitest Kurulumu
- @testing-library/svelte: render ve fireEvent
- Store'ları ve Reaktiviteyi Test Etme
- Modülleri ve Fetch İşlemlerini Taklit Etme