render
- React Native kursu
- Orta seviye
- Ders 96/116
- 5 dk
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.
Başlangıç kodu
// render'ı içe aktar
// 'merhaba var' adında bir test yaz
// render ile App'i çiz; getByText ile 'Merhaba' bul; toBeTruthy ile denetleÖrnek çözüm
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();
});Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 render sonucundan sorgu al
const { ____ } = render(<App />);const { getByText } = render(<App />);Açıklama: getByText metinle öğe bulur.
2 render hangi ortamda çalışır?
const { getByText } = render(<App />);- Tarayıcıda
- Cihazda
- Üretimde
- Test ortamında Doğru cevap
Açıklama: render JavaScript test ortamında çalışır.
3 Sorguyu rolüne eşle
| Kavram | Anlamı |
|---|---|
getByText |
Metinle bulur |
getByTestId |
testID ile bulur |
getByPlaceholderText |
Yer tutucu ile bulur |
getAllByText |
Tüm eşleşenleri bulur |