Entegrasyon testi
- React kursu
- İleri seviye
- Ders 45/56
- 4 dk
Birden çok bileşeni birlikte test etmeyi öğrenirsin.
Entegrasyon testi
Entegrasyon testi, birkaç bileşeni birlikte çalıştırır ve gerçek etkileşimi doğrular. React Testing Library'nin render fonksiyonu bileşeni DOM'a çıkarır; screen üzerinde sorgu yaparsın.
fireEvent.click ile bir düğmeye tıklar, screen.getByText ile sonucu bulursun. Testler kullanıcı gibi davranır: iç yapıya değil, çıktıya bakar.
Dosya adı Button.test.jsx biçiminde olur; test koşucusu otomatik bulur.
fireEvent ve kullanıcı etkileşimi
fireEvent, DOM olaylarını taklit eder. fireEvent.click(element) bir tıklamayı, fireEvent.change(input, { target: { value: '...' } }) bir yazmayı simüle eder.
Daha gerçekçi davranış için @testing-library/user-event kullanılır; o da klavye ve odak gibi ayrıntıları taklit eder.
Sorgularda getByRole en sağlamdır; erişilebilir rol ve isme göre bulur.
Uygulama Button testini yaz
Button.test.jsx içeriğini yaz. render ile <Button label="Kaydet" /> çiz, screen.getByText('Kaydet') ile bul ve expect(...).toBeInTheDocument() ile doğrula. test('etiket gösterir', () => {}) kullan.
Başlangıç kodu
// Button testini buraya yazÖrnek çözüm
import { render, screen } from '@testing-library/react';
import Button from './Button';
test('etiket gösterir', () => {
render(<Button label="Kaydet" />);
expect(screen.getByText('Kaydet')).toBeInTheDocument();
});Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Entegrasyon testinde en iyi sorgu yöntemi hangisidir?
- screen.getByText ile görünen metni bulmak Doğru cevap
- componentRef ile iç state okumak
- querySelector ile sınıf aramak
- console.log ile yazdırmak
Açıklama: Kullanıcı gibi görünen metne bakmalısın.
2 Boşluğu doldur: testte düğmeye tıkla
import { render, screen, fireEvent } from '@testing-library/react';
fireEvent.____(screen.getByText('Artır'));import { render, screen, fireEvent } from '@testing-library/react';
fireEvent.click(screen.getByText('Artır'));Açıklama: Tıklama için fireEvent.click kullanılır.
3 Test kavramlarını eşleştir
| Kavram | Anlamı |
|---|---|
render |
DOM'a çıkarır |
screen |
Sorgu yapar |
fireEvent |
Olay taklit eder |
getByRole |
Erişilebilir rolle bulur |