Özet - RTL testleri
- React kursu
- Orta seviye
- Ders 72/80
- 5 dk
Bir sayaç bileşenini artır butonuna basarak test edersin.
Özet - RTL testleri
Bu grupta RTL'nin temel araçlarını gördün: render ile bileşeni DOM'a basma, screen ile sorgu yapma, getByRole önceliği ve userEvent ile gerçekçi olay tetikleme.
Unutma: testler kullanıcı gözüyle yazılır. Erişilebilir sorgular önce, testId son çare. Eşzamansız işlemlerde await zorunludur.
Şimdi öğrendiklerini küçük bir testte birleştir: render, rol sorgusu, tıklama ve iddia.
Uygulama Toggle testi
Toggle bileşeni bir düğmeye basınca "Açık" ve "Kapalı" metinleri arasında geçiş yapar. Bir test yaz: userEvent.setup() ile user al, render(<Toggle />) et, düğmeyi screen.getByRole('button') ile bul, await user.click(btn) yap ve expect(screen.getByText(/Açık/)).toBeInTheDocument() ile doğrula. Test async olmalı.
Başlangıç kodu
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { Toggle } from "./Toggle";
// testi buraya yazÖrnek çözüm
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { Toggle } from "./Toggle";
test("toggle turns on", async () => {
const user = userEvent.setup();
render(<Toggle />);
const btn = screen.getByRole("button");
await user.click(btn);
expect(screen.getByText(/Açık/)).toBeInTheDocument();
});Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Erişilebilir sorgu önceliği nedir?
- getByRole önce, getByTestId son Doğru cevap
- getByText önce, getByRole son
- querySelector önce, screen son
- getByTestId önce, getByRole son
Açıklama: getByRole erişilebilirlik ağacını kullanır, önce o.
2 Async testte hangi anahtar kelime?
test("async", ____ () => {
await user.click(btn);
});test("async", async () => {
await user.click(btn);
});Açıklama: async callback, await kullanımına izin verir.