Entegrasyon testi

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.

Örnek çözümü göster

import { render, screen } from '@testing-library/react';
import Button from './Button';

test('etiket gösterir', () => {
  render(<Button label="Kaydet" />);
  expect(screen.getByText('Kaydet')).toBeInTheDocument();
});

Kendini test et

Entegrasyon testinde en iyi sorgu yöntemi hangisidir?
- screen.getByText ile görünen metni bulmak
- componentRef ile iç state okumak
- querySelector ile sınıf aramak
- console.log ile yazdırmak
Cevabı göster

screen.getByText ile görünen metni bulmak — Kullanıcı gibi görünen metne bakmalısın.

Boşluğu doldur: testte düğmeye tıkla

import { render, screen, fireEvent } from '@testing-library/react';

fireEvent.____(screen.getByText('Artır'));

Cevabı göster

import { render, screen, fireEvent } from '@testing-library/react';

fireEvent.click(screen.getByText('Artır'));

Test kavramlarını eşleştir

render

DOM'a çıkarır
screen

Sorgu yapar
fireEvent

Olay taklit eder
getByRole

Erişilebilir rolle bulur

Sıradaki ders: Mock service worker

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler