Module und API-Aufrufe mocken
Mocken Sie ES-Module mit jest.mock(), ersetzen Sie fetch mit MSW (Mock Service Worker) und testen Sie von externen Daten abhängige Komponenten ohne echte Netzwerkaufrufe.
Module und API-Aufrufe mocken ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Warum Mocks verwenden?
Unit-Tests sollten isoliert sein. Echte API-Aufrufe sind langsam, unzuverlässig und kostenintensiv. Beim Mocking werden Abhängigkeiten durch kontrollierte Test-Doubles ersetzt, die vorhersehbare Antworten zurückgeben.
jest.mock() – Ganze Module mocken
jest.mock('module-path') ersetzt das gesamte Modul durch automatisch gemockte Versionen. Alle Exporte werden zu jest.fn()-Stubs. Rufen Sie mockReturnValue oder mockResolvedValue auf, um Rückgabewerte festzulegen.
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() – Manuelle Stubs
jest.fn() erstellt eine Mock-Funktion, deren Aufrufe Sie verfolgen und die Sie steuern können. Dies ist nützlich für Callback-Props und Service-Abhängigkeiten.
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' });Mocks mit beforeEach zurücksetzen
Setzen Sie Mocks zwischen Tests zurück, damit kein Zustand zwischen ihnen durchsickert. Verwenden Sie jest.clearAllMocks() in beforeEach.
beforeEach(() => {
jest.clearAllMocks(); // reset call counts and implementations
});
afterAll(() => {
jest.restoreAllMocks(); // restore original implementations
});MSW – Mock Service Worker
MSW fängt echte fetch/XHR-Aufrufe auf Netzwerkebene ab, indem es Service Worker (im Browser) oder Node.js-Interceptor (in Tests) verwendet. Schreiben Sie Request-Handler, die gefälschte Antworten zurückgeben.
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());MSW-Überschreibungen pro Test
Überschreiben Sie den Standard-Handler für ein bestimmtes Testszenario.
test('handles server error', async () => {
server.use(
http.get('/api/users', () => new HttpResponse(null, { status: 500 }))
);
render(<UserList />);
await screen.findByText(/server error/i);
});localStorage mocken
Verwenden Sie jest.spyOn, um Web-Storage-Methoden in Tests zu mocken, die localStorage verwenden.
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; });
});Timer mocken
jest.useFakeTimers() ersetzt setTimeout/setInterval durch von Jest gesteuerte Versionen. jest.runAllTimers() lässt alle Timer im Zeitraffer ablaufen.
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());Modulfabrik-Muster
Bei TypeScript geben Mock-Modulfabriken die korrekten Typen zurück.
jest.mock('./services/auth', () => ({
login: jest.fn().mockResolvedValue({ token: 'test-token' }),
logout: jest.fn()
}));Snapshot-Tests sparsam einsetzen
Snapshot-Tests speichern eine serialisierte Darstellung der Ausgabe einer Komponente und schlagen fehl, wenn sie sich ändert. Sie lassen sich einfach erstellen, können aber viele falsch-positive Ergebnisse erzeugen. Verwenden Sie sie nur für stabile, rein darstellende Komponenten.
Kurzer Test
Was ist der wichtigste Vorteil von MSW gegenüber jest.mock('fetch') beim Mocken von APIs?
Zusammenfassung: Mocking
jest.mock() ersetzt Module. jest.fn() erstellt nachvollziehbare Stubs. Setzen Sie Mocks in beforeEach zurück. MSW fängt HTTP-Anfragen auf Netzwerkebene ab – der realistischste Ansatz für Mocking. Überschreiben Sie den Server mit server.use() pro Test, um Fehlerszenarien abzubilden. Verwenden Sie Fake-Timer für zeitabhängigen Code. Bevorzugen Sie MSW für Integrationstests von Komponenten.
Häufig gestellte Fragen
Ist die Lektion „Module und API-Aufrufe mocken“ kostenlos?
Ja — der vollständige Text von „Module und API-Aufrufe mocken“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Module und API-Aufrufe mocken“?
Mocken Sie ES-Module mit jest.mock(), ersetzen Sie fetch mit MSW (Mock Service Worker) und testen Sie von externen Daten abhängige Komponenten ohne echte Netzwerkaufrufe. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Frontend Academy zu starten?
Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „Module und API-Aufrufe mocken“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?
Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Jest einrichten und grundlegende Tests
- @testing-library/react: render, userEvent
- @testing-library/vue: Komponenten mounten
- Module und API-Aufrufe mocken