javascript / expert
Snippet
Synthetische MutationObserver-Testumgebung für deterministisches DOM-Effekt-Testen
Demonstriert eine fortgeschrittene Testtechnik mit der MutationObserver-API des Browsers, um tatsächliche DOM-Mutationen zu abzufangen, zu protokollieren und zu überprüfen, die durch React-Layout-Effekte in Integrationstests entstehen.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
function createDOMMutationHarness(targetNode) {const recordLog = [];const observer = new MutationObserver((mutations) => {for (const mutation of mutations) {recordLog.push({ type: mutation.type, target: mutation.target.nodeName, addedCount: mutation.addedNodes.length });}});observer.observe(targetNode, { attributes: true, childList: true, subtree: true });return {getMutations: () => [...recordLog],disconnect: () => observer.disconnect()};}
react
Erklärung
1
const observer = new MutationObserver((mutations) => {
Erstellt eine MutationObserver-Instanz zur Überwachung asynchroner DOM-Baum-Modifikationen.
2
recordLog.push({ type: mutation.type, target: mutation.target.nodeName, addedCount: mutation.addedNodes.length });
Extrahiert relevante DOM-Mutations-Metadaten in ein serialisiertes Testverifikationsobjekt.
3
observer.observe(targetNode, { attributes: true, childList: true, subtree: true });
Konfiguriert die tiefe Subtree-Überwachung für Attributänderungen und Elementeinfügungen.
4
getMutations: () => [...recordLog],
Bietet einen unveränderlichen Snapshot-Getter der aufgezeichneten DOM-Mutationsereignisse für Test-Assertions.