Mockowanie modułów i wywołań API
Proszę mockować moduły ES za pomocą jest.mock(), zastępować fetch przez MSW (Mock Service Worker) oraz testować komponenty zależne od danych zewnętrznych bez rzeczywistych połączeń sieciowych.
Mockowanie modułów i wywołań API to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Po co używać mocków?
Testy jednostkowe powinny być izolowane. Rzeczywiste wywołania API są powolne, zawodne i kosztowne. Mockowanie zastępuje zależności kontrolowanymi atrapami testowymi, które zwracają przewidywalne odpowiedzi.
jest.mock() — mockowanie całych modułów
jest.mock('module-path') zastępuje cały moduł wersjami zamockowanymi automatycznie. Wszystkie eksporty stają się atrapami jest.fn(). Do ustawiania wartości zwracanych służą mockReturnValue lub mockResolvedValue.
jest.mock('./api');
import { fetchUser } from './api';
(fetchUser as jest.Mock).mockResolvedValue({ id: 1, name: 'Alice' });
test('renders user name', async () => {
render(<Profile userId="1" />);
await screen.findByText('Alice');
expect(fetchUser).toHaveBeenCalledWith('1');
});jest.fn() — ręczne atrapy
jest.fn() tworzy funkcję mock, której wywołania można śledzić i kontrolować. Jest przydatna w przypadku propsów będących funkcjami zwrotnymi oraz zależności usług.
const onSubmit = jest.fn();
render(<Form onSubmit={onSubmit} />);
await user.click(screen.getByRole('button', { name: /submit/i }));
expect(onSubmit).toHaveBeenCalledOnce();
expect(onSubmit).toHaveBeenCalledWith({ email: 'alice@example.com' });Resetowanie mocków w beforeEach
Mocki należy resetować między testami, aby zapobiec wyciekaniu stanu. W beforeEach należy użyć jest.clearAllMocks().
beforeEach(() => {
jest.clearAllMocks(); // reset call counts and implementations
});
afterAll(() => {
jest.restoreAllMocks(); // restore original implementations
});MSW — Mock Service Worker
MSW przechwytuje rzeczywiste wywołania fetch/XHR na poziomie sieci, używając Service Workers (w przeglądarce) lub interceptorów Node.js (w testach). Należy pisać handlery żądań zwracające fikcyjne odpowiedzi.
import { setupServer } from 'msw/node';
import { http, HttpResponse } from 'msw';
const server = setupServer(
http.get('/api/users', () => {
return HttpResponse.json([{ id: 1, name: 'Alice' }]);
})
);
beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());Nadpisywanie MSW dla pojedynczego testu
Domyślny handler należy nadpisać dla konkretnego scenariusza testowego.
test('handles server error', async () => {
server.use(
http.get('/api/users', () => new HttpResponse(null, { status: 500 }))
);
render(<UserList />);
await screen.findByText(/server error/i);
});Mockowanie localStorage
Należy używać jest.spyOn do mockowania metod Web Storage w testach korzystających z localStorage.
beforeEach(() => {
const store: Record<string, string> = {};
jest.spyOn(Storage.prototype, 'getItem').mockImplementation((key) => store[key] ?? null);
jest.spyOn(Storage.prototype, 'setItem').mockImplementation((key, val) => { store[key] = val; });
});Mockowanie timerów
jest.useFakeTimers() zastępuje setTimeout/setInterval wersjami kontrolowanymi przez Jest. jest.runAllTimers() przewija wszystkie timery do końca.
jest.useFakeTimers();
test('shows toast for 3 seconds', () => {
render(<Toast message="Saved!" />);
expect(screen.getByText('Saved!')).toBeInTheDocument();
jest.advanceTimersByTime(3000);
expect(screen.queryByText('Saved!')).not.toBeInTheDocument();
});
afterEach(() => jest.useRealTimers());Wzorzec fabryki modułu
W TypeScript fabryki mockowanych modułów zwracają właściwe typy.
jest.mock('./services/auth', () => ({
login: jest.fn().mockResolvedValue({ token: 'test-token' }),
logout: jest.fn()
}));Testy snapshotów — używaj oszczędnie
Testy snapshotów zapisują zserializowaną reprezentację wyniku komponentu i kończą się niepowodzeniem, jeśli wynik się zmieni. Łatwo je tworzyć, ale mogą generować wiele fałszywie pozytywnych wyników. Należy ich używać tylko w przypadku stabilnych, czysto prezentacyjnych komponentów.
Szybkie sprawdzenie
Jaka jest główna przewaga MSW nad jest.mock('fetch') w mockowaniu API?
Podsumowanie: mockowanie
jest.mock() zastępuje moduły. jest.fn() tworzy możliwe do śledzenia stuby. Należy resetować mocki w beforeEach. MSW przechwytuje żądania HTTP na poziomie sieci — jest to najbardziej realistyczne podejście do mockowania. Metoda server.use() umożliwia nadpisania dla poszczególnych testów w scenariuszach błędów. W przypadku kodu zależnego od czasu należy używać fałszywych timerów. W testach integracyjnych komponentów warto preferować MSW.
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 41
- Lekcje
- 163
Często zadawane pytania
Czy lekcja „Mockowanie modułów i wywołań API” jest bezpłatna?
Tak — pełny tekst „Mockowanie modułów i wywołań API” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Mockowanie modułów i wywołań API”?
Proszę mockować moduły ES za pomocą jest.mock(), zastępować fetch przez MSW (Mock Service Worker) oraz testować komponenty zależne od danych zewnętrznych bez rzeczywistych połączeń sieciowych. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?
Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Mockowanie modułów i wywołań API”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?
Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Konfiguracja Jest i podstawowe testy
- @testing-library/react: render i userEvent
- @testing-library/vue: montowanie komponentów
- Mockowanie modułów i wywołań API