Özet - RTL testleri

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ı.

Örnek çözümü göster

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();
});

Kendini test et

Erişilebilir sorgu önceliği nedir?
- getByRole önce, getByTestId son
- getByText önce, getByRole son
- querySelector önce, screen son
- getByTestId önce, getByRole son
Cevabı göster

getByRole önce, getByTestId son — getByRole erişilebilirlik ağacını kullanır, önce o.

Async testte hangi anahtar kelime?

test("async", ____ () => {
  await user.click(btn);
});

Cevabı göster

test("async", async () => {
  await user.click(btn);
});

Sıradaki ders: Proje: Panel

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler