nextTick() is an asynchronous framework function for testing components. It returns a Promise that resolves after pending scheduler jobs have run, allowing the component to re-render before the test inspects the DOM. section 14.0 section 14.4
Use nextTick() to coordinate tests with asynchronous component work:
- Mount the component or trigger an asynchronous event. section 14.1
- Await nextTick() before asserting the updated DOM. section 14.1
- Await nextTick() before unmounting, and again afterward when unmount hooks are asynchronous. section 14.1.1
Testing asynchronous data loading
A component can initially render “Loading...” while an onMounted() hook fetches todos. After mocking fetch(), await nextTick(), then assert that “Feed the cat” and “Mow the lawn” appear in the DOM. Without awaiting, the loading state remains the immediately observable result. section 14.1.1
Listing 14.1 nextTick() and flushPromises() (scheduler.js)
export function nextTick() {
scheduleUpdate()
return flushPromises()
}
function flushPromises() {
return new Promise((resolve) => setTimeout(resolve))
}
The implementation schedules scheduler processing, then waits through a timer-backed Promise so pending microtasks and jobs can finish before the returned Promise resolves. section 14.1.3
