Testing async behavior in Vue - Step-by-Step Execution

Concept Flow - Testing async behavior

Start Test

↓

Call async function

↓

Wait for Promise to resolve

↓

Check result

↓

Pass

↓

End Test

The test starts by calling an async function, waits for it to finish, then checks the result to decide pass or fail.

Execution Sample

Vue

import { ref } from 'vue';

async function fetchData() {
  return new Promise(resolve => setTimeout(() => resolve('done'), 100));
}

const result = ref('');

async function test() {
  result.value = await fetchData();
}

This code defines an async function that resolves after 100ms, then a test function awaits it and stores the result.

Execution Table

Step	Action	Promise State	result.value	Notes
1	Call test()	pending	''	test() starts, fetchData() called, promise pending
2	Await fetchData()	pending	''	Waiting for promise to resolve
3	After 100ms, promise resolves	fulfilled	'done'	fetchData() resolves with 'done'
4	Assign result.value = 'done'	fulfilled	'done'	result.value updated after await
5	Test can check result.value	fulfilled	'done'	Test sees updated value

💡 Test ends after promise resolves and result.value is updated

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	Final
result.value	''	''	''	'done'	'done'	'done'
Promise State	n/a	pending	pending	fulfilled	fulfilled	fulfilled

Key Moments - 2 Insights

Why is result.value still empty right after calling test()?

Because fetchData() returns a promise that takes time to resolve, so result.value updates only after await finishes (see steps 1-3 in execution_table).

What happens if we check result.value before awaiting fetchData()?

It will still be empty since the async operation hasn't completed yet (refer to step 2 in execution_table).

Visual Quiz - 3 Questions

Look at the execution table, what is the value of result.value at Step 3?

A undefined

B '' (empty string)

C 'done'

D null

💡 Hint

Check the 'result.value' column at Step 3 in the execution_table.

At which step does the promise returned by fetchData() become fulfilled?

A Step 2

B Step 3

C Step 1

D Step 4

💡 Hint

Look at the 'Promise State' column in the execution_table.

If fetchData() took longer to resolve, how would the execution_table change?

A Steps 3 and 4 would occur later, with promise state pending longer

B result.value would update immediately at Step 1

C Promise would never resolve, test would end early

D result.value would be 'done' from the start

💡 Hint

Consider the timing of promise resolution in the execution_table steps.

Concept Snapshot

Testing async behavior in Vue:
- Use async functions and await to handle promises.
- Test waits for async calls to finish before checking results.
- result.value updates only after await resolves.
- Always await async calls in tests to get correct state.
- Promises start pending and become fulfilled when done.

Full Transcript

This visual trace shows how testing async behavior works in Vue. The test calls an async function fetchData that returns a promise resolving after 100 milliseconds. Initially, the promise is pending and result.value is empty. After the promise resolves, result.value updates to 'done'. The test must await the async call to see the updated value. Key moments include understanding why result.value is empty before awaiting and how promise states change. The quizzes check understanding of promise states and timing. Remember to always await async functions in tests to get correct results.