React Native Testing Library
- React Native kursu
- Orta seviye
- Ders 95/116
- 5 dk
React Native Testing Library'yi öğrenirsin.
React Native Testing Library nedir?
React Native Testing Library (RNTL), bileşenleri test ortamında çizen ve onlarla etkileşim kuran bir kütüphanedir. render, getByText, fireEvent gibi fonksiyonlar sağlar. Jest ile birlikte çalışır.
RNTL'nin felsefesi nasıl çizildiğine değil, ne göründüğüne test odaklanmaktır. Uygulamanın iç yapısını (state, alt bileşenler) değil, kullanıcının gördüğü metni ve davranışı sorgular. Bu, testleri yeniden düzenlemeye (refactor) dayanıklı yapar. render(<App />) çağrısı bileşeni test ortamına çizer; dönen sonuçtan sorgular alırsın.
render ile çiz
render, bir bileşeni test ortamında çizer. Sonuç olarak sorgu fonksiyonları döndürür: getByText, getByTestId vb. const { getByText } = render(<App />) yazarak hem çizer hem sorguyu alırsın.
RNTL, React Native bileşenlerini gerçek bir cihaz yerine JavaScript test ortamında çizer; bu çok hızlıdır. render sonucu bir nesnedir; onu yok sayıp yalnızca sorgularını almak yaygındır. Aynı bileşeni birden çok kez render edebilirsin; her çağrı bağımsız bir çizim yapar. Test bitince RNTL otomatik temizler; afterEach gerekmez.
Uygulama render testi yaz
Bir App bileşeni zaten tanımlı; <Text>Merhaba</Text> döndürür. render(<App />) çağrısı yapan bir test yaz. test('merhaba gösterilir', () => { ... }) kullan.
Başlangıç kodu
// render'ı içe aktar: @testing-library/react-native
// 'merhaba gösterilir' adında bir test yaz; render ile App'i çizÖrnek çözüm
import { render } from "@testing-library/react-native";
import { Text } from "react-native";
function App() {
return <Text>Merhaba</Text>;
}
test("merhaba gösterilir", () => {
render(<App />);
});Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Kavramı rolüne eşle
| Kavram | Anlamı |
|---|---|
Jest |
Test çalıştırır |
RNTL |
Bileşeni çizer |
render |
Test ortamında mount |
getByText |
Metinle öğe bulur |
2 render import
import { ____ } from '@testing-library/react-native';import { render } from '@testing-library/react-native';Açıklama: render RNTL'den içe aktarılır.
3 RNTL hangi amaca hizmet eder?
import { render } from '@testing-library/react-native';- APK derler
- Veritabanı yönetir
- Bileşenleri test ortamında çizer Doğru cevap
- Tema uygular
Açıklama: RNTL bileşenleri test ortamında çizer.