render

render ile bileşen render etmeyi öğrenirsin.

render ne döndürür?

render bir bileşeni çizer ve bir sonuç nesnesi döndürür. Bu nesne üzerinde sorgu fonksiyonları bulunur: getByText, getByTestId, getByPlaceholderText gibi. Sorgular çizilen ağaçtan öğe bulur.

Tipik kullanım: const { getByText } = render(<App />). Burada getByText ayırma (destructuring) ile sonuç nesnesinden alınır. getByText('Merhaba') çağrısı metni 'Merhaba' olan öğeyi döndürür. Bulamazsa hata fırlatır; bu, testin kırmızı olmasına yol açar. Bu yüzden getByText varlığı kesin olan metinler için kullanılır.

render sonucu

render'dan dönen nesne üzerinde en sık kullanılan sorgular şunlardır: getByText metinle, getByTestId testID prop'una göre, getByPlaceholderText yer tutucu metinle öğe bulur. Her biri bir öğe döndürür; bulunamazsa hata fırlatır.

Sorgulardan dönen öğe üzerinde expect(el).toBeTruthy() gibi denetimler yapılır. Bazen bir sorgu birden fazla öğe döndürebilir; o durumda getAllByText kullanılır ve dizi döner. Test yazarken en kararlı sorguyu seç: metin değişebilir ama testID sabit kalır. Bu yüzden üretimde testID tercih edilir.

Uygulama render ile sorgu kullan

Bir App bileşeni zaten tanımlı; <Text>Merhaba</Text> döndürür. render(<App />) çağır; sonuçtan getByText al. getByText('Merhaba') ile öğeyi bul ve expect(...).toBeTruthy() ile denetle.

Örnek çözümü göster

import { render } from "@testing-library/react-native";
import { Text } from "react-native";

function App() {
  return <Text>Merhaba</Text>;
}

test("merhaba var", () => {
  const { getByText } = render(<App />);
  expect(getByText("Merhaba")).toBeTruthy();
});

Kendini test et

render sonucundan sorgu al

const { ____ } = render(<App />);

Cevabı göster

const { getByText } = render(<App />);

render hangi ortamda çalışır?
```
const { getByText } = render(<App />);
```
- Tarayıcıda
- Cihazda
- Üretimde
- Test ortamında
Cevabı göster

Test ortamında — render JavaScript test ortamında çalışır.
Sorguyu rolüne eşle

getByText

Metinle bulur
getByTestId

testID ile bulur
getByPlaceholderText

Yer tutucu ile bulur
getAllByText

Tüm eşleşenleri bulur

Sıradaki ders: getByText

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler