Mock service worker
- React kursu
- İleri seviye
- Ders 46/56
- 4 dk
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.
Başlangıç kodu
// MSW sunucusunu buraya yazÖrnek çözüm
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;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 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' }))
);import { setupServer } from 'msw/node';
import { http, HttpResponse } from 'msw';
const server = setupServer(
http.get('/api/user', () => HttpResponse.json({ name: 'Ayşe' }))
);Açıklama: setupServer ile sunucu kurulur.
2 MSW'de hata senaryosu nasıl test edilir?
- Gerçek sunucuyu kapatıp
- HttpResponse.error() döndürerek Doğru cevap
- fetch'i null yaparak
- try/catch ile sarmalayarak
Açıklama: HttpResponse.error() ile hata yanıtı verilir.
3 MSW kavramlarını eşleştir
| Kavram | Anlamı |
|---|---|
setupServer |
Sunucuyu kurar |
http.get |
Yolu yakalar |
HttpResponse.json |
Sahte yanıt verir |
server.listen |
Dinlemeye başlar |