React Testing Library
- React kursu
- Orta seviye
- Ders 69/80
- 4 dk
RTL ile bileşen testi yazmanın temelini öğrenirsin.
React Testing Library
React Testing Library (RTL), bileşenleri kullanıcı gözüyle test eden bir kütüphanedir. DOM düğümlerini sorgulayıp iddialarda bulunursun; iç uygulamayı değil, gerçek kullanıcı deneyimini test edersin.
RTL'nin temel felsefesi uygulamanızı kullanıcıların kullanma biçimine yakın test etmektir. Bu yüzden data-testid yerine erişilebilir sorguları (getByRole, getByText) önerir.
Bu yaklaşım, iç refactor yapsan bile testlerin bozulmamasını sağlar; çünkü test kullanıcı arayüzüne bakar, uygulamanın içine değil.
render ve screen
render bileşenini sanal bir DOM'a basar ve sorgu fonksiyonları döndürür. screen ise belgeye bağlı global sorgular sağlar; çoğu testte screen.getByText gibi metodları kullanırsın.
Modern RTL'de screen kullanımı önerilir; çünkü import listesini kısa tutar ve sorguların belgeden bağımsız çalışmasını sağlar.
getBy bulamazsa hata fırlatır; queryBy null döner; findBy eşzamansız bekler.
Uygulama İlk RTL testi
Greeting bileşenini name="Dünya" propu ile render eden, ekranda "Merhaba Dünya" metnini screen.getByText ile bulan ve expect(...).toBeInTheDocument() ile doğrulayan bir test yaz. Test test() veya it() ile sarılı olsun.
Başlangıç kodu
import { render, screen } from "@testing-library/react";
import { Greeting } from "./Greeting";
// testi buraya yazÖrnek çözüm
import { render, screen } from "@testing-library/react";
import { Greeting } from "./Greeting";
test("greeting shows text", () => {
render(<Greeting name="Dünya" />);
expect(screen.getByText("Merhaba Dünya")).toBeInTheDocument();
});Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 RTL'nin temel felsefesi nedir?
- İç state'i doğrulamak
- Kullanıcı gibi test etmek Doğru cevap
- Hook'ları taklit etmek
- Sınıf bileşenlerini çağırmak
Açıklama: RTL, kullanıcı deneyimine en yakın şekilde test yazmayı hedefler.
2 screen ile metin arama
import { render, screen } from "@testing-library/react";
render(<Button>Sil</Button>);
const btn = screen.____("Sil");import { render, screen } from "@testing-library/react";
render(<Button>Sil</Button>);
const btn = screen.getByText("Sil");Açıklama: screen.getByText metni arar.
3 Sorgu tiplerini eşleştir
| Kavram | Anlamı |
|---|---|
render |
DOM'a basar |
screen |
Global sorgu |
getByText |
Metin arar |
findByText |
Eşzamansız bekler |