Mock service worker

MSW ile API isteklerini taklit etmeyi öğrenirsin.

Mock Service Worker

MSW, ağ isteklerini test ortamında yakalar ve sahte yanıtlar döndürür. setupServer ile bir sunucu kurar, http.get ile yolu kaydedersin.

Bir işleyici HttpResponse.json(...) ile yanıt döndürür. Test dosyasında beforeAll(() => server.listen()) ve afterAll(() => server.close()) çağrılır.

Böylece bileşen gerçek API olmadan doğru çekme davranışını test eder.

İşleyici ve yanıt

Bir MSW işleyicisi http.get('/api/user', resolver) biçimindedir. resolver, istek bilgilerini alır ve bir HttpResponse döndürür.

Durum kodu vermek için HttpResponse.json(data, { status: 201 }) kullanırsın. Hata senaryosunu test etmek için HttpResponse.error() döndürürsün.

Tüm işleyiciler bir dizi içinde setupServer'a verilir.

Uygulama MSW şunucusunu yaz

MSW şunucusunu yaz. setupServer çağır, içine http.get('/api/user', () => HttpResponse.json({ name: 'Ayşe' })) ekle. Sunucuyu dışa aktar.

Örnek çözümü göster

import { setupServer } from 'msw/node';
import { http, HttpResponse } from 'msw';

const server = setupServer(
  http.get('/api/user', () => HttpResponse.json({ name: 'Ayşe' }))
);
export default server;

Kendini test et

Boşluğu doldur: MSW sunucusu kur

import { setupServer } from 'msw/node';
import { http, HttpResponse } from 'msw';

const server = ____(
  http.get('/api/user', () => HttpResponse.json({ name: 'Ayşe' }))
);

Cevabı göster

import { setupServer } from 'msw/node';
import { http, HttpResponse } from 'msw';

const server = setupServer(
  http.get('/api/user', () => HttpResponse.json({ name: 'Ayşe' }))
);

MSW'de hata senaryosu nasıl test edilir?
- Gerçek sunucuyu kapatıp
- HttpResponse.error() döndürerek
- fetch'i null yaparak
- try/catch ile sarmalayarak
Cevabı göster

HttpResponse.error() döndürerek — HttpResponse.error() ile hata yanıtı verilir.
MSW kavramlarını eşleştir

setupServer

Sunucuyu kurar
http.get

Yolu yakalar
HttpResponse.json

Sahte yanıt verir
server.listen

Dinlemeye başlar

Sıradaki ders: Coverage ölçümü

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler