javascript / expert
Snippet
Mocking Suspense Boundary Resolution States via Microtask Step Flushes
Testing asynchronous component hydration and Suspense state resolution requires repeatedly cycling both task macro-queues and Vue microtask render queues to guarantee all asynchronous setup hooks finish completely.
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
Breakdown
1
await new Promise((resolve) => setTimeout(resolve, 0));
Empties the event loop task queue to allow pending promise chains inside async setup to fulfill.
2
await nextTick();
Flushes pending Vue DOM update microtasks triggered by completed async component resolution.