render ve screen

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.

Örnek çözümü göster

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

Kendini test et

Bir düğmeyi rolüyle aramak için hangisi?
- screen.getByRole('button')
- screen.findByClass('btn')
- screen.getById('button')
- screen.getByTag('button')
Cevabı göster

screen.getByRole('button') — Screen.getByRole('button'). Erişilebilir sorgular önceliklidir.

Rol ile düğme arama

render(<SaveButton />);

const btn = screen.____(
  /kaydet/i
);

Cevabı göster

render(<SaveButton />);

const btn = screen.getByRole(
  /kaydet/i
);

Sorgu önceliğini eşleştir

getByRole

1. öncelik
getByLabelText

2. öncelik
getByText

Orta öncelik
getByTestId

Son çare

Sıradaki ders: Olay tetikleme

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler