javascript / expert
Snippet
Überprüfung asynchroner Svelte-Store-Zustände mit Deferred Promises
Beim Unit-Testing asynchroner Svelte-Stores ist die manuelle Steuerung der Promise-Auflösung entscheidend, um Lade-Zwischenzustände zu validieren. Die Verwendung eines Deferred-Promise-Closures ermöglicht es, über `subscribe` gesendete Zustands-Snapshots vor und direkt nach der Datenauflösung zu prüfen.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
import { writable } from 'svelte/store';import { expect, test } from 'vitest';function createAsyncStore(fetcher) {const { subscribe, set } = writable({ data: null, loading: false, error: null });return {subscribe,async load() {set({ data: null, loading: true, error: null });try {const data = await fetcher();set({ data, loading: false, error: null });} catch (err) {set({ data: null, loading: false, error: err.message });}}};}test('emits intermediate loading state during pending fetch resolution', async () => {let resolvePromise;const mockFetcher = () => new Promise(res => { resolvePromise = res; });const store = createAsyncStore(mockFetcher);const states = [];const unsubscribe = store.subscribe(s => states.push(s));const loadPromise = store.load();expect(states.at(-1)).toEqual({ data: null, loading: true, error: null });resolvePromise('success_data');await loadPromise;expect(states.at(-1)).toEqual({ data: 'success_data', loading: false, error: null });unsubscribe();});
svelte
Erklärung
1
const mockFetcher = () => new Promise(res => { resolvePromise = res; });
Exponiert den inneren Resolve-Callback nach außen, um die Ausführung bei Bedarf zu verzögern.
2
const unsubscribe = store.subscribe(s => states.push(s));
Abonniert Store-Updates und speichert jeden gesendeten Zustands-Snapshot in einem Array.
3
expect(states.at(-1)).toEqual({ data: null, loading: true, error: null });
Prüft, ob der Store vor der Promise-Auflösung korrekt in einen ausstehenden Ladezustand gewechselt ist.
4
resolvePromise('success_data'); await loadPromise;
Erfüllt das ausstehende Promise manuell und wartet auf den Abschluss des Store-Ladevorgangs.