0Pricing
React Academy · Ders

Özel Kancaları Test Etme (Önizleme)

Özel kancaların nasıl test edileceğini önizleyin: küçük bir taşıyıcı bileşen oluşturun, durum değişikliklerini yönlendirin ve DOM veya günlükler üzerinden çıktıları doğrulayın.

Özel Kancaları Test Etme (Önizleme), CoddyKit'te ücretsiz bir React Academy dersidir. Bu, 3 dersinin 3. 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.

Kanca testi ön izlemesi

Amaç: Küçük bir deneme bileşeni aracılığıyla bir kancanın davranışını doğrulayın.

  • Girdileri yönlendirin
  • Döndürülen değerleri gözlemleyin
  • Efektleri ve temizlemeyi kontrol edin

Strateji: deneme bileşeni

Strateji:

  • Kancayı kullanan küçük bir bileşen oluşturun
  • Değişiklikleri tetiklemek için düğmeler ve girdiler sunun
  • Görünür metin veya konsol günlükleri aracılığıyla doğrulayın

Örnek: useCounter + deneme bileşeni

useCounter ve tıklayarak sonuçları gözlemlememizi sağlayan küçük bir deneme bileşeni oluşturuyoruz; bu, elle yapılan bir test gibidir.


<div id="root"></div>

Efektleri ve temizlemeyi kontrol etme

Efekt kullanan kancalarda (zamanlayıcılar/dinleyiciler), temizlemenin çalıştığını görmek için deneme bileşeninin bağlandığından ve kaldırıldığından veya koşulların değiştirildiğinden emin olun (başıboş günlükler ya da zamanlayıcılar olmamalıdır).

Örnek: useInterval + temizleme

Küçük bir useInterval sayacı artırır. Temizlemeyi doğrulamak için deneme bileşeninden başlatabilir/durdurabilirsiniz.


<div id="root"></div>

Ön izlemeden gerçek testlere

Sonraki adımlar:

  • Deneme bileşenini oluşturmak ve metni doğrulamak için React Testing Library kullanın
  • Aralık/gecikmeli çalışma kancalarında zamanı ilerletmek için Vitest/Jest zamanlayıcılarını kullanın
  • Testi kolaylaştırmak için kancaları saf tutun ve en az sayıda API sunun

Kanca testi ön izlemesi kontrolü

Bu ön izlemede, test kitaplıkları olmadan özel bir kancayı test etmenin kolay bir yolu nedir?

Özet

Özet: Kancayı çalıştırmak için küçük bir deneme bileşeni oluşturun, çıktıları ve temizlemeyi doğrulayın; ardından bir test kitaplığıyla resmî testlere geçin.

Sıkça Sorulan Sorular

“Özel Kancaları Test Etme (Önizleme)” dersi ücretsiz mi?

Evet — “Özel Kancaları Test Etme (Önizleme)” 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.

“Özel Kancaları Test Etme (Önizleme)” dersinde ne öğreneceğim?

Özel kancaların nasıl test edileceğini önizleyin: küçük bir taşıyıcı bileşen oluşturun, durum değişikliklerini yönlendirin ve DOM veya günlükler üzerinden çıktıları doğrulayı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 3. dersidir.

“Özel Kancaları Test Etme (Önizleme)” 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

  1. Mantığı Kancalara Ayırma: Parametreler ve Dönüşler
  2. Adlandırma, Önbellekleme ve Efekt Düzeni
  3. Özel Kancaları Test Etme (Önizleme)
← React Academy Sayfasına Dön