javascript / intermediate
Snippet
Simulieren asynchroner Netzwerkanfragen in Svelte-Komponenten-Tests
Komponenten, die asynchron Daten laden, benötigen im Integrationstest isolierte Netzwerk-Mocks. Mock Service Worker (MSW) fängt HTTP-Anfragen auf Netzwerkebene ab und liefert deterministische JSON-Antworten, um Lade- und Ziel-Zustände zuverlässig zu testen.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { render, screen, waitFor } from '@testing-library/svelte';import { http, HttpResponse } from 'msw';import { setupServer } from 'msw/node';import UserLoader from './UserLoader.svelte';const server = setupServer(http.get('/api/user', () => HttpResponse.json({ name: 'Alex', role: 'Developer' })));beforeAll(() => server.listen());afterAll(() => server.close());test('fetches and displays user profile data', async () => {render(UserLoader);expect(screen.getByText('Loading...')).toBeTruthy();await waitFor(() => {expect(screen.getByText('Alex - Developer')).toBeTruthy();});});
svelte
Erklärung
1
const server = setupServer( http.get('/api/user', () => HttpResponse.json({ name: 'Alex', role: 'Developer' })) );
Richtet einen Mock-Server ein, um HTTP-GET-Anfragen abzufangen und mit Test-JSON zu beantworten.
2
render(UserLoader);
Mountet die Svelte-Komponente, was deren internen asynchronen Datenabruf auslöst.
3
await waitFor(() => { expect(screen.getByText('Alex - Developer')).toBeTruthy(); });
Wartet asynchron, bis die Netzwerkantwort verarbeitet wurde und der Text im DOM erscheint.