javascript / expert
Snippet
Synthetische Ereignisweiterleitung und MutationObserver-Mocking beim Testen von Svelte-Knoten-Direktiven
Demonstriert isolierte Unit-Tests für benutzerdefinierte Svelte-DOM-Aktionen unter Verwendung von MutationObserver-Aufzeichnungen und synthetischen CustomEvent-Impulsen. Dies ermöglicht die Überprüfung von Knotenänderungen ohne vollständiges Browser-Rendering.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
export function testSvelteAction(actionFn, targetNode, options) {const mutations = [];const mockObserver = new MutationObserver((records) => mutations.push(...records));mockObserver.observe(targetNode, { attributes: true, childList: true });const instance = actionFn(targetNode, options);targetNode.dispatchEvent(new CustomEvent('test-trigger', { bubbles: true }));return {getMutations: () => [...mutations],cleanup: () => {mockObserver.disconnect();instance?.destroy?.();}};}
svelte
Erklärung
1
const mutations = [];
Initialisiert einen Speicherpuffer zum Erfassen von Knotenänderungen während des Tests.
2
const mockObserver = new MutationObserver((records) => mutations.push(...records));
Erstellt einen MutationObserver zur Erfassung von Attribut- und DOM-Strukturänderungen.
3
const instance = actionFn(targetNode, options);
Führt die Svelte-Aktion direkt auf dem Test-DOM-Knoten mit Testparametern aus.
4
targetNode.dispatchEvent(new CustomEvent('test-trigger', { bubbles: true }));
Löst ein aufsteigendes Benutzerereignis aus, um den Event-Listener der Aktion zu testen.
5
instance?.destroy?.();
Führt die Aufräumfunktion der Aktion aus, um Speicherlecks nach dem Test zu verhindern.