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.

Practice

1. In Vue testing, why do we use await nextTick() after triggering an async update?

easy

A. To wait for Vue to finish updating the DOM after state changes

B. To pause the test indefinitely

C. To reset the component to its initial state

D. To skip the async operation and test synchronously

Solution

1. Step 1: Understand Vue's DOM update cycle

   Vue batches DOM updates and applies them asynchronously after state changes.

2. Step 2: Purpose of await nextTick()

   Using await nextTick() waits for Vue to complete these DOM updates before assertions.

3. Final Answer:

   To wait for Vue to finish updating the DOM after state changes -> Option A

4. Quick Check:

   nextTick waits for DOM update [OK]

Hint: Remember nextTick waits for DOM updates after async changes [OK]

Common Mistakes:

• Thinking nextTick pauses test indefinitely
• Assuming nextTick resets component state
• Believing nextTick skips async operations

2. Which of the following is the correct way to write an async test function in Vue using Jest?

easy

A. test('async test', () => { someAsyncFunction().then(); });

B. test('async test', () => { await someAsyncFunction(); });

C. test('async test', async () => { await someAsyncFunction(); });

D. test('async test', () => { someAsyncFunction(); });

Solution

1. Step 1: Identify async test syntax

   Tests using async/await must declare the test function as async to use await inside.

2. Step 2: Check each option

   test('async test', async () => { await someAsyncFunction(); }); correctly declares the test function async and awaits the async function.

3. Final Answer:

   test('async test', async () => { await someAsyncFunction(); }); -> Option C

4. Quick Check:

   Async test functions need async keyword [OK]

Hint: Always add async before test callback to use await [OK]

Common Mistakes:

• Omitting async keyword before test function
• Using await outside async function
• Not waiting for promises to resolve

3. Given this Vue test snippet, what will be the value of wrapper.text() after the test runs?

const wrapper = mount(MyComponent);
await wrapper.find('button').trigger('click');
await nextTick();

Assuming the button click triggers an async state update that changes displayed text from 'Off' to 'On'.

medium

A. 'Off'

B. 'On'

C. '' (empty string)

D. Throws an error

Solution

1. Step 1: Understand the click triggers async state change

   The button click changes the component's state asynchronously from 'Off' to 'On'.

2. Step 2: Use await nextTick() to wait for DOM update

   After triggering click, awaiting nextTick ensures DOM reflects the new state.

3. Final Answer:

   'On' -> Option B

4. Quick Check:

   Async update + nextTick = updated DOM text [OK]

Hint: Wait nextTick after async event to see updated DOM [OK]

Common Mistakes:

• Checking DOM before nextTick causes stale text
• Assuming immediate synchronous update
• Forgetting to await async events

4. What is wrong with this Vue test code snippet?

test('updates message after async call', async () => {
  const wrapper = mount(MyComponent);
  wrapper.vm.fetchData();
  expect(wrapper.text()).toContain('Loaded');
});

medium

A. Missing await before fetchData call

B. Missing await nextTick() after fetchData

C. Using expect before async update completes

D. All of the above

Solution

1. Step 1: Identify missing awaits

   The test calls async fetchData without awaiting it, so the update may not finish.

2. Step 2: Recognize missing nextTick and premature expect

   Without awaiting nextTick, DOM updates may not be applied before expect runs.

3. Final Answer:

   All of the above -> Option D

4. Quick Check:

   Await async calls and nextTick before assertions [OK]

Hint: Always await async calls and nextTick before assertions [OK]

Common Mistakes:

• Not awaiting async methods
• Not waiting for DOM updates
• Running assertions too early

5. You have a Vue component that fetches user data asynchronously on mount and displays the user's name. Which test approach correctly verifies the name is shown after the async fetch?

test('displays user name after fetch', async () => {
  const wrapper = mount(UserComponent);
  // What should you do here?
});

hard

A. await flushPromises(); await nextTick(); expect(wrapper.text()).toContain('Alice');

B. expect(wrapper.text()).toContain('Alice');

C. await wrapper.vm.fetchUser(); expect(wrapper.text()).toContain('Alice');

D. wrapper.vm.fetchUser(); expect(wrapper.text()).toContain('Alice');

Solution

1. Step 1: Wait for all promises to resolve

   Using flushPromises() waits for all pending promises like fetch to finish.

2. Step 2: Wait for Vue DOM updates

   After promises resolve, await nextTick() ensures DOM updates are applied.

3. Final Answer:

   await flushPromises(); await nextTick(); expect(wrapper.text()).toContain('Alice'); -> Option A

4. Quick Check:

   Flush promises + nextTick = reliable async test [OK]

Hint: Flush promises then nextTick before checking DOM [OK]

Common Mistakes:

• Checking DOM before promises resolve
• Not waiting for nextTick after async updates
• Calling async methods without awaiting