React Testing Library + Vitest/Jest Kurulumu
Vitest/Jest'i React Testing Library ile kurup yapılandırın; jsdom kullanın, bileşenleri işleyin ve DOM'u bir kullanıcı gibi sorgulayın.
React Testing Library + Vitest/Jest Kurulumu, CoddyKit'te ücretsiz bir React Academy dersidir. Bu, 3 dersinin 1. 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, React Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. React Academy kursu toplamda 3 dersten oluşur.
Bu teknoloji yığını neden kullanılır
Amaç: Bileşenleri, kullanıcının etkileşim kurduğu şekilde sınamak.
- Vitest/Jest çalıştırıcısı
- jsdom ortamı
- React Testing Library (RTL)
Kurulum ve ortam
Kurulum:
- npm i -D vitest @testing-library/react @testing-library/user-event jsdom
- Sınama ortamını jsdom olarak ayarlayın
- Komut dosyalarını ekleyin: test, test:watch
Sınanacak örnek bileşen
Bu küçük bileşen, sınamaların sorgulayabilmesi için anlaşılır bir rol, ad ve durum sunar.
<div id="root"></div>
Önizleme: sınama dosyasının içeriği
RTL ve Vitest kullanılarak yazılmış bir sınamanın önizlemesi. Başvuru amacıyla dosyanın içeriğini görüntülüyoruz.
<div id="root"></div>
Yapılandırma için gerekli olanlar
- Ortam: jsdom
- Kurulum: İsterseniz @testing-library/jest-dom ekleyin
- Komut dosyaları: "test", "test:watch"
Kullanıcı gibi sorgulayın
Tercih edilen sorgular:
- getByRole / findByRole
- getByLabelText
- getByText
Erişilebilir bir sorgu uygun olmadığında yalnızca sınama kimliklerini kullanın.
RTL sorgu kılavuzu kontrolü
Özet
Özet: Vitest/Jest ve RTL'yi kurun, jsdom'u ayarlayın, bileşenleri görüntüleyin ve rol/etiket sorgularını tercih edin. Gerçekçi etkileşimler için user-event ekleyin.
Sıkça Sorulan Sorular
“React Testing Library + Vitest/Jest Kurulumu” dersi ücretsiz mi?
Evet — “React Testing Library + Vitest/Jest Kurulumu” 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 React Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. React Academy kursu toplamda 3 dersten oluşur.
“React Testing Library + Vitest/Jest Kurulumu” dersinde ne öğreneceğim?
Vitest/Jest'i React Testing Library ile kurup yapılandırın; jsdom kullanın, bileşenleri işleyin ve DOM'u bir kullanıcı gibi sorgulayın. React 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.
React Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te React 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, 3 dersinin 1. dersidir.
“React Testing Library + Vitest/Jest Kurulumu” 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 React Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her React 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
- React Testing Library + Vitest/Jest Kurulumu
- Sorgular, Olaylar, Doğrulamalar — Formlar ve Eşzamansız Arayüz
- Veri Alma ve Zamanlayıcıları Taklit Etme