Testing async behavior in Vue - Mini Project: Build & Apply

Testing async behavior

📖 Scenario: You are building a simple Vue 3 component that fetches user data asynchronously and displays it. You want to test the async behavior to ensure the data loads correctly.

🎯 Goal: Create a Vue 3 component that fetches user data asynchronously using setTimeout to simulate a delay, then test that the data is displayed after loading.

📋 What You'll Learn

Use Vue 3 Composition API with <script setup>

Create a reactive variable to hold user data

Simulate async data fetch with setTimeout

Display loading text while waiting

Show user name after data loads

💡 Why This Matters

🌍 Real World

Many web apps load data from servers asynchronously. Showing loading states improves user experience.

💼 Career

Understanding async data handling and testing is essential for frontend developers working with Vue or similar frameworks.

1

DATA SETUP: Create reactive user data variable

In a Vue 3 <script setup> block, import ref from 'vue' and create a reactive variable called user initialized to null.

Vue

import { ref } from 'vue'

// Your code here

Hint

Use ref(null) to create a reactive variable that starts empty.

2

CONFIGURATION: Create loading state variable

Add a reactive variable called loading initialized to true to track if data is loading.

Vue

import { ref } from 'vue'

const user = ref(null)

// Your code here

Hint

Use ref(true) to indicate loading starts as true.

3

CORE LOGIC: Simulate async data fetch with setTimeout

Use setTimeout to simulate fetching user data after 1 second. Inside the timeout callback, set user.value to { name: 'Alice' } and set loading.value to false.

Vue

import { ref } from 'vue'

const user = ref(null)
const loading = ref(true)

// Your code here

Hint

Use setTimeout with 1000 milliseconds delay to simulate async fetch.

4

COMPLETION: Add template to show loading and user name

Add a Vue template that shows Loading... text when loading is true, and shows User: {{ user.name }} when loading is false.

Vue

import { ref } from 'vue'

const user = ref(null)
const loading = ref(true)

setTimeout(() => {
  user.value = { name: 'Alice' }
  loading.value = false
}, 1000)



  

Hint

Use v-if and v-else to show loading text or user name.

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