Olay tetikleme
- React kursu
- Orta seviye
- Ders 71/80
- 4 dk
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ı.
Başlangıç kodu
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { Counter } from "./Counter";
// testi buraya yazÖrnek çözüm
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();
});Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Hangisi gerçek kullanıcı davranışına daha yakın?
- fireEvent.click
- btn.dispatchEvent
- btn.click()
- userEvent.click Doğru cevap
Açıklama: userEvent odağı ve klavyeyi gerçekçi simüle eder.
2 userEvent.setup
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
render(<Counter />);
const user = userEvent.____();import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
render(<Counter />);
const user = userEvent.setup();Açıklama: userEvent.setup() bir user nesnesi döndürür.
3 Olay tetikleme: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
fireEvent |
Düşük seviye |
userEvent |
Yüksek seviye |
await |
Eşzamansız |
findByText |
Promise döner |