React
Olay tetikleme
fireEvent ve userEvent ile tıklama ve yazmayı öğrenirsin.
Olay tetikleme
RTL'de olay tetiklemenin iki yolu vardır: fireEvent düşük seviyeli, sentetik olaylar fırlatır; userEvent yüksek seviyeli, gerçek kullanıcı davranışını taklit eder (odak, klavye, tıklama).
Modern projeler userEvent önerir; çünkü gerçek tarayıcı akışına yakındır. Örneğin userEvent.click(btn) tıklamadan önce odağı ayarlar.
Eşzamansız işlemler için await kullanmalısın; aksi halde iddia erken çalışır.
await ile beklemek
Tıklama sonrası eşzamansız güncelleme oluyorsa testin await kullanması gerekir. Aksi halde iddia, DOM güncellenmeden çalışır ve test flaky olur.
Önce const user = userEvent.setup() al; sonra await user.click(btn) çağır. Bu kalıp React 18 ile uyumlu, en güvenli yöntemdir.
Bekleyen metni bulmak için findByText de kullanışlıdır; o da Promise döner.
Uygulama Tıklama testi
Counter bileşeni tıklamayla sayıyı artırır. Bir test yaz: userEvent.setup() ile user al, render(<Counter />) et, düğmeyi screen.getByRole('button') ile bul, await user.click(btn) yap ve sonucu expect(screen.getByText(/Sayaç: 1/)).toBeInTheDocument() ile doğrula. Test test() ile sarmalı ve async olmalı.
Örnek çözümü göster
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { Counter } from "./Counter";
test("click increments", async () => {
const user = userEvent.setup();
render(<Counter />);
const btn = screen.getByRole("button");
await user.click(btn);
expect(screen.getByText(/Sayaç: 1/)).toBeInTheDocument();
});
Kendini test et
-
Hangisi gerçek kullanıcı davranışına daha yakın?
- fireEvent.click
- btn.dispatchEvent
- btn.click()
- userEvent.click
Cevabı göster
userEvent.click — userEvent odağı ve klavyeyi gerçekçi simüle eder.
-
userEvent.setup
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
render(<Counter />);
const user = userEvent.____();
Cevabı göster
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
render(<Counter />);
const user = userEvent.setup();
-
Olay tetikleme: kavramları eşleştir
- fireEvent
- Düşük seviye
- userEvent
- Yüksek seviye
- await
- Eşzamansız
- findByText
- Promise döner
Sıradaki ders: Özet - RTL testleri
