render ve screen
- React kursu
- Orta seviye
- Ders 70/80
- 4 dk
Bir bileşeni render edip screen ile sorgulamayı öğrenirsin.
render ve ekran
render çağrısı bir bileşeni sanal DOM'a basar ve nesne döndürür. Bu nesnenin container özelliği kök düğümü verir; unmount ise bileşeni temizler.
Çoğu testte container'a dokunmadan screen üzerinden sorgu yaparsın. Ama bazen container.querySelector ile CSS seçici gerekir.
Her testten sonra RTL otomatik temizlik yapar; afterEach eklemek isteğe bağlıdır.
Sorgu önceliği
RTL sorgularını erişilebilirlik sırasına göre önerir: önce getByRole, sonra getByLabelText, getByPlaceholderText, getByText, en son getByTestId.
Bu sıra, testlerin gerçek kullanıcı deneyimine yakın kalmasını sağlar. Ekran okuyucu kullanıcıları rol ve etiket görür; test de öyle.
getByTestId yalnızca alternatif yoksa kullanılır; çünkü kullanıcı test'leri göremez.
Uygulama SaveButton testi
SaveButton bileşenini render edip screen.getByRole('button', { name: /kaydet/i }) ile bulan ve expect(btn).toBeInTheDocument() ile doğrulayan bir test yaz. Test test() ile sarılı olsun.
Başlangıç kodu
import { render, screen } from "@testing-library/react";
import { SaveButton } from "./SaveButton";
// testi buraya yazÖrnek çözüm
import { render, screen } from "@testing-library/react";
import { SaveButton } from "./SaveButton";
test("save button is visible", () => {
render(<SaveButton />);
const btn = screen.getByRole("button", { name: /kaydet/i });
expect(btn).toBeInTheDocument();
});Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Bir düğmeyi rolüyle aramak için hangisi?
- screen.getByRole('button') Doğru cevap
- screen.findByClass('btn')
- screen.getById('button')
- screen.getByTag('button')
Açıklama: Screen.getByRole('button'). Erişilebilir sorgular önceliklidir.
2 Rol ile düğme arama
render(<SaveButton />);
const btn = screen.____(
/kaydet/i
);render(<SaveButton />);
const btn = screen.getByRole(
/kaydet/i
);Açıklama: getByRole erişilebilir sorgudur.
3 Sorgu önceliğini eşleştir
| Kavram | Anlamı |
|---|---|
getByRole |
1. öncelik |
getByLabelText |
2. öncelik |
getByText |
Orta öncelik |
getByTestId |
Son çare |