TDD Using React.js and ES Eğitimi

Eğitim Hakkında

TDD döngüsünden birim ve entegrasyon testine, mock'tan sürekli entegrasyona test önce yaklaşımı

Test-Driven Development (TDD) Using React.js and ES Eğitimi, React bilen geliştiricilere önce test yazıp sonra kod geliştirme disiplinini öğretir. Katılımcılar kırmızı-yeşil-refactor döngüsünü, Jest ile birim testini ve React Testing Library ile bileşen testini uygular. Program modern ES özelliklerini, kullanıcı etkileşimi testini, mock ve stub tekniklerini, eşzamansız kod testini ve testleri sürekli entegrasyon hattında çalıştırmayı kapsar.

Süre ve Format

4 Gün. Her gün dört modül; önce test yazıp sonra kod geliştirme döngüsüyle bir React uygulaması test odaklı olarak adım adım inşa edilir.

Seviye

Orta Seviye — React bilenlere test önce yaklaşımıyla sağlam ve güvenilir uygulama geliştirmeyi öğretir

Öğrenme Metodu

Her özellik önce başarısız bir testle başlar, sonra testi geçiren kod yazılıp refactor edilir; TDD döngüsü canlı uygulanır.

Neden Bu Eğitim?

🎯Güvenli refactor

Testlerle korunan kodu güvenle yeniden düzenler, değişiklik yaparken regresyon korkusu olmadan geliştirme yaparsınız.

🐞Erken hata yakalama

Önce test yaklaşımıyla hataları geliştirme aşamasında yakalar, üretime sızan kusurları ve hata ayıklama süresini azaltırsınız.

📐Daha iyi tasarım

Test edilebilir kod yazma zorunluluğu, bileşenlerinizi daha gevşek bağlı, sade ve sorumlulukları net biçimde tasarlamaya yönlendirir.

Anahtar Konular

tdd eğitimireact test eğitimijest eğitimireact testing librarytest odaklı geliştirmereact birim testifrontend test otomasyonutest driven developmentreact kursuyazılım test eğitimi

“İyi test yazmak, yarının sizi bugünden korumasıdır. TDD ile her değişikliği güvenle, korkusuzca yapmayı öğrenirsiniz.”

Ön Koşullar

Eğitimden en iyi verimi almak için faydalı olacak bilgi ve ortam

1

React bilgisi

Bileşen, props, state ve Hook kavramlarına aşinalık gerekir; eğitim test yazımına odaklanır, React temeli işlenmez.

2

JavaScript ve ES6

Modül, Promise, async/await, ok fonksiyonları ve dizi metotları gibi modern JavaScript kavramlarını bilmek gerekir.

3

Node.js ortamı

Node.js ve npm kurulu, Vite veya Create React App ile proje çalıştırabilir bir geliştirme ortamı yeterlidir.

4

Terminal kullanımı

Komut satırından betik çalıştırma ve paket kurma gibi temel terminal işlemlerine aşinalık faydalıdır.

Eğitim İçeriği

Programın gün gün akışı aşağıdadır. Bir güne tıklayarak o günün modüllerini ve içeriklerini görebilirsiniz.

Günün hedefiKatılımcı TDD felsefesini ve kırmızı-yeşil-refactor döngüsünü kavrar, Jest ile ilk birim testlerini yazar, matcher'ları kullanır ve test çıktısını yorumlar.

Modül 1

TDD Felsefesi ve Döngü

Test önce yaklaşımının amaç ve faydaları
Kırmızı-yeşil-refactor döngüsünün kavranması
Küçük adımlarla ilerleme ve geri bildirim
Test yazmadan koda başlamanın riskleri
TDD ile klasik test arasındaki fark
Testin yaşayan dokümantasyon işlevi

Modül 2

Jest Kurulumu ve İlk Test

Jest kurulumu ve yapılandırma dosyası
test ve describe blokları ile test düzeni
expect ve temel matcher kullanımı
İlk başarısız testi yazıp kırmızı görme
Testi geçiren en basit kodu yazma
Watch modu ile testleri sürekli çalıştırma

Modül 3

Birim Testi Yazma

Saf fonksiyonları birim test ile doğrulama
toBe, toEqual ve toContain matcher'ları
Hata fırlatan kodu test ile doğrulama
Sınır değer ve uç durum testleri
Test adlandırma ve okunabilirlik ilkeleri
Arrange-Act-Assert düzeninde test kurma

Modül 4

Modern ES ve Test Edilebilir Kod

ES modülleri ile import ve export yapısı
Saf fonksiyon ve yan etkisiz kod yazma
Destructuring ve spread ile sade kod
Promise ve async/await temelleri
Bağımlılıkları dışarıdan alma yaklaşımı
Test edilebilirliği artıran kod desenleri

Günün hedefiKatılımcı React Testing Library ile bileşen render eder, erişilebilir sorgularla öğe bulur, kullanıcı etkileşimini simüle eder ve davranışı kullanıcı gözüyle test eder.

Modül 1

React Testing Library Temelleri

RTL felsefesi: davranışı kullanıcı gibi test etme
render ile bileşeni test ortamına yerleştirme
screen nesnesi ile öğeye erişim
Uygulama ayrıntısı yerine çıktıyı test etme
jest-dom matcher'ları ile zengin iddialar
Test dosyası düzeni ve adlandırma

Modül 2

Sorgu Türleri ve Seçim

getBy, queryBy ve findBy farkları
getByRole ile erişilebilir öğe bulma
getByText ve getByLabelText kullanımı
getByTestId'yi son çare olarak kullanma
Birden çok öğe için getAllBy kullanımı
Doğru sorgu seçimiyle sağlam test yazma

Modül 3

Kullanıcı Etkileşimi Testi

user-event ile tıklama ve yazma simülasyonu
Form doldurma ve gönderme senaryosu
fireEvent ile düşük düzey olay tetikleme
Buton tıklamasında durum değişimini doğrulama
Koşullu render'ın görünürlüğünü test etme
Klavye etkileşimlerini test etme

Modül 4

Bileşen Davranışını Doğrulama

props değişiminde çıktının doğrulanması
state güncellemesinin arayüze yansımasını test etme
Hata ve boş durum görünümlerini test etme
Erişilebilirlik odaklı test yazma
Önce test yazıp bileşeni geliştirme
Testi geçecek en sade bileşeni kurma

Günün hedefiKatılımcı bağımlılıkları mock'lar, API çağrılarını taklit eder, eşzamansız kodu bekler, özel Hook'ları test eder ve zamanlayıcıları kontrol altında dener.

Modül 1

Mock ve Stub Teknikleri

jest.fn ile sahte fonksiyon oluşturma
Çağrı sayısı ve argümanlarını doğrulama
jest.mock ile modül taklidi yapma
Dönüş değerini mockReturnValue ile ayarlama
Spy ile gerçek fonksiyonu izleme
Mock'u testler arasında sıfırlama

Modül 2

API ve Ağ İsteği Testi

fetch çağrısını mock'layarak test etme
Başarılı ve hatalı yanıt senaryoları
Mock Service Worker ile ağ taklidine bakış
Yükleniyor durumunun test edilmesi
Hata durumunda arayüzü doğrulama
Gerçek ağa bağımlılığı testten ayırma

Modül 3

Eşzamansız Kod Testi

findBy sorgularıyla asenkron öğe bekleme
waitFor ile koşulun gerçekleşmesini bekleme
async/await ile asenkron test yazma
Veri yüklenince listeyi doğrulama
act uyarılarını anlama ve giderme
Zamanlayıcıları fake timers ile kontrol etme

Modül 4

Özel Hook Testi Yazma

renderHook ile özel Hook'u test etme
act ile Hook durumunu güncelleme
Hook dönüş değerlerini doğrulama
Veri çekme Hook'unu mock ile test etme
Hook'un kenar durumlarını deneme
Önce test yazıp Hook'u geliştirme

Günün hedefiKatılımcı birden çok bileşeni birlikte test eder, kapsama raporu üretir, test kalitesini değerlendirir ve testleri sürekli entegrasyon hattında otomatik çalıştırır.

Modül 1

Entegrasyon Testi

Birden çok bileşeni birlikte test etme
Yönlendirme ile akışı uçtan uca deneme
Context ve sağlayıcılarla render etme
Kullanıcı senaryosunu bütün olarak test etme
Birim ve entegrasyon dengesinin kurulması
Test piramidi yaklaşımının kavranması

Modül 2

Kapsama ve Test Kalitesi

Kod kapsama raporunu Jest ile üretme
Satır, dal ve fonksiyon kapsamasını okuma
Kapsama yüzdesinin yanıltıcı yönleri
Anlamlı test ile sayı avcılığını ayırma
Kırılgan testleri tanıma ve sağlamlaştırma
Test bakımını sürdürülebilir kılma

Modül 3

Snapshot ve İleri Teknikler

Snapshot testinin mantığı ve sınırları
Snapshot'ı güncelleme ve gözden geçirme
Snapshot'ın aşırı kullanımından kaçınma
Parametreli test ile çok senaryo deneme
Test yardımcıları ve ortak kurulum yazma
setup ve teardown ile düzenli test

Modül 4

Sürekli Entegrasyon ve Otomasyon

Testleri CI hattında otomatik çalıştırma
GitHub Actions ile test iş akışı kurma
Başarısız testte dağıtımı engelleme
Lint ve test adımlarını hatta ekleme
Pull request'te test raporu görme
Test önce kültürünü ekibe yayma

Eğitim Kazanımları

Program sonunda katılımcılar:

✅

TDD döngüsü

Kırmızı-yeşil-refactor döngüsünü uygular, önce test yazıp sonra kod geliştirme disiplinini içselleştirirsiniz.

✅

Jest ile birim testi

Jest ile saf fonksiyonları ve iş mantığını test eder, matcher'ları ustalıkla kullanarak sağlam birim testleri yazarsınız.

✅

Bileşen testi

React Testing Library ile bileşenleri kullanıcı gözüyle test eder, erişilebilir sorgularla sağlam testler kurarsınız.

✅

Kullanıcı etkileşimi

user-event ile tıklama, yazma ve form gönderimini simüle eder, davranışı gerçekçi senaryolarla doğrularsınız.

✅

Mock teknikleri

jest.fn ve jest.mock ile bağımlılıkları ve API çağrılarını taklit eder, testleri dış sistemlerden yalıtırsınız.

✅

Eşzamansız test

findBy ve waitFor ile asenkron kodu test eder, veri yükleme ve hata durumlarını güvenle doğrularsınız.

✅

Entegrasyon testi

Birden çok bileşeni ve kullanıcı akışını birlikte test eder, test piramidini dengeli biçimde kurarsınız.

✅

Kapsama ve CI

Kapsama raporu üretir, test kalitesini değerlendirir ve testleri sürekli entegrasyon hattında otomatik çalıştırırsınız.

Kimler İçin Uygundur?

React ile uygulama geliştiren
kodunu test önce yaklaşımıyla daha güvenilir ve bakımı kolay hale getirmek isteyen ön yüz geliştiricileri
kalite odaklı yazılımcılar
test kültürü kazanmak isteyen ekipler için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?

React ile uygulama geliştiren ve kodunu daha güvenilir, bakımı kolay hale getirmek isteyen ön yüz geliştiricileri, kalite odaklı yazılımcılar ve test kültürü kazanmak isteyen ekipler için uygundur. Bileşen, props, state ve Hook bilgisi gereklidir; eğitim React temellerini değil test yazımını öğretir.

Hangi test araçları kullanılıyor?

Eğitimde birim testi için Jest, bileşen testi için React Testing Library ve user-event kullanılır. API testi için fetch mock'lama ve Mock Service Worker, erişilebilir iddialar için jest-dom ele alınır. Son gün testler GitHub Actions ile sürekli entegrasyon hattında otomatik çalıştırılır.

TDD gerçek projelerde pratik mi?

Evet. Önce test yaklaşımı başlangıçta yavaş görünse de hataları erken yakalar, güvenli refactor sağlar ve yaşayan dokümantasyon üretir. Eğitim TDD'yi dogma olarak değil pratik bir disiplin olarak öğretir; birim, entegrasyon ve snapshot testleri arasında dengeyi kurmanızı sağlar.

React temellerini bilmiyorum, katılabilir miyim?

Bu eğitim test yazımına odaklanır ve React bileşen, props, state ile Hook bilgisini ön koşul kabul eder. React'e yeniyseniz önce React ile modern ön yüz geliştirme eğitimini almanız önerilir; böylece TDD eğitiminden çok daha fazla verim alırsınız.

Eğitim sonunda sertifika veriliyor mu?

Programı tamamlayan katılımcılar Digital Vizyon Akademi Katılım ve Başarı Sertifikası alır. Sertifika tamamlanan modülleri ve test odaklı geliştirilen örnek uygulamayı belgeler. Eğitim yüz yüze veya online olarak verilebilir ve kurumsal gruplara özel olarak uyarlanabilir.

Sertifikalandırma

Bu eğitim Digital Vizyon Akademi Başarı Sertifikası ile tamamlanır.

Eğitim başında “Ön Test”, bitiminde “Son Test” uygulanarak gelişim ölçümlenir. Değerlendirme formunu dolduran katılımcılar sertifikalarını alır. Sertifikanızın geçerliliğini Sertifika Sorgulama sayfasından doğrulayabilirsiniz.

Örnek Sertifika

TEST-DRIVEN DEVELOPMENT (TDD) USING REACT.JS AND ES EĞİTİMİ

Eğitim Hakkında

Neden Bu Eğitim?

Anahtar Konular

Ön Koşullar

Eğitim İçeriği

TDD Felsefesi ve Döngü

Jest Kurulumu ve İlk Test

Birim Testi Yazma

Modern ES ve Test Edilebilir Kod

React Testing Library Temelleri

Sorgu Türleri ve Seçim

Kullanıcı Etkileşimi Testi

Bileşen Davranışını Doğrulama

Mock ve Stub Teknikleri

API ve Ağ İsteği Testi

Eşzamansız Kod Testi

Özel Hook Testi Yazma

Entegrasyon Testi

Kapsama ve Test Kalitesi

Snapshot ve İleri Teknikler

Sürekli Entegrasyon ve Otomasyon

Eğitim Kazanımları

Kimler İçin Uygundur?

Sıkça Sorulan Sorular

Sertifikalandırma

Eğitim Bilgileri

Bu Eğitimle Birlikte Tercih Edilenler

Next.js - Advanced Eğitimi

Next.js ile Sunucu Tarafı Render ve Performans Eğitimi

NodeJS ve React ile Mikrohizmetler Oluşturma Eğitimi

REACT Foundations Eğitimi

React ile Kurumsal Ön Yüz Geliştirme Eğitimi

React JS Programlama Eğitimi