javascript / expert
Snippet
Simulieren von Suspense-Auflösungszuständen mittels Mikrotask-Schritt-Flushes
Das Testen von asynchroner Komponenten-Hydratisierung und Suspense-Zustandsauflösung erfordert das wiederholte Durchlaufen von Makrotask-Warteschlangen und Vue-Mikrotask-Render-Warteschlangen, um sicherzustellen, dass alle asynchronen Setup-Hooks vollständig abgeschlossen sind.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { nextTick } from 'vue';export async function flushSuspensePromises(iterations = 3) {for (let i = 0; i < iterations; i++) {await new Promise((resolve) => setTimeout(resolve, 0));await nextTick();}}export async function testAsyncComponent(mountFn) {const wrapper = mountFn();await flushSuspensePromises();return wrapper;}
vue
Erklärung
1
await new Promise((resolve) => setTimeout(resolve, 0));
Leert die Event-Loop-Task-Warteschlange, damit ausstehende Promise-Ketten im asynchronen Setup aufgelöst werden.
2
await nextTick();
Verarbeitet ausstehende Vue DOM-Update-Mikrotasks, die durch die asynchrone Komponentenauflösung ausgelöst wurden.