Testing async behavior in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to wait for the async function to finish before asserting.

Vue

await [1]();

Drag options to blanks, or click blank then click option'

AsetTimeout

Bconsole.log

CnextTick

DfetchData

Attempts:

3 left

💡 Hint

Common Mistakes

Using setTimeout instead of awaiting the async function

Not using await at all

You need to await the async function fetchData to ensure it finishes before continuing.

2fill in blank

medium

Complete the code to trigger the button click and wait for DOM updates.

Vue

await wrapper.find('button').trigger('[1]');
await nextTick();

Drag options to blanks, or click blank then click option'

Aclick

Bhover

Cfocus

Dsubmit

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'submit' on a button instead of 'click'

Using 'hover' which is not a click event

The event to simulate a button press is click.

3fill in blank

hard

Fix the error in the test by correctly waiting for the promise to resolve.

Vue

await [1]();
expect(wrapper.text()).toContain('Loaded');

Drag options to blanks, or click blank then click option'

AnextTick

BsetTimeout

CflushPromises

Djest.runAllTimers

Attempts:

3 left

💡 Hint

Common Mistakes

Using setTimeout which is unreliable

Using nextTick which only waits for Vue DOM updates, not promises

flushPromises waits for all pending promises to resolve, ensuring the component updates before assertions.

4fill in blank

hard

Fill both blanks to correctly mock an async API call and wait for the component update.

Vue

jest.spyOn(api, '[1]').mockResolvedValue({ data: 'test' });
await [2]();

Drag options to blanks, or click blank then click option'

AfetchData

BflushPromises

CgetData

DnextTick

Attempts:

3 left

💡 Hint

Common Mistakes

Mocking the wrong method name

Using nextTick instead of flushPromises to wait for promises

Mock the fetchData API call and then wait for all promises to resolve with flushPromises.

5fill in blank

hard

Fill all three blanks to test async data fetching and DOM update in a Vue component.

Vue

const wrapper = mount(Component);
await wrapper.vm.[1]();
await [2]();
expect(wrapper.find('p').text()).toBe('[3]');

Drag options to blanks, or click blank then click option'

AloadData

BflushPromises

CHello World

DfetchData

Attempts:

3 left

💡 Hint

Common Mistakes

Calling the wrong method name

Not waiting for promises before asserting

Checking wrong text content

Call the component method loadData, wait for promises with flushPromises, then check the paragraph text is Hello World.