javascript / expert
Snippet
Testen von Svelte-Action-Lebenszyklus-Bereinigungen mit DOM MutationObserver Mocks
Das Testen von benutzerdefinierten Svelte-Element-Actions erfordert die Überprüfung, dass Bereinigungsmethoden DOM-Event-Listener freigeben, ohne Fehler auszulösen, wenn Knoten entfernt werden. Das Einbetten der Action in einen DOM-MutationObserver validiert die automatische Bereinigungslogik beim Demontieren von Komponenten.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
export function createActionCleanupTester(actionFn, node) {let isCleanedUp = false;const destroyHandle = actionFn(node) || {};const observer = new MutationObserver(() => {if (!document.body.contains(node)) {try {destroyHandle.destroy?.();isCleanedUp = true;} catch (err) {throw new Error(`Action cleanup thrown: ${err.message}`);}}});observer.observe(node.parentNode, { childList: true });return () => ({ isCleanedUp, disconnect: () => observer.disconnect() });}
svelte
Erklärung
1
const destroyHandle = actionFn(node) || {};
Führt die Svelte-Action auf einem Ziel-DOM-Elementknoten aus, um das Destruktor-Objekt zu erhalten.
2
const observer = new MutationObserver(() => {
Erstellt eine MutationObserver-Instanz zur Überwachung von Elemententfernungs-Ereignissen in Testumgebungen.
3
if (!document.body.contains(node)) {
Prüft, ob der Zielknoten während der Testausführung vom Haupt-DOM getrennt wurde.
4
destroyHandle.destroy?.();
Ruft die Teardown-Methode sicher auf und fängt Laufzeitfehler beim Demontieren ab.