Testing user interactions in Vue - Step-by-Step Execution

Concept Flow - Testing user interactions

Render Component

↓

User Event Triggered

↓

Event Handler Runs

↓

State or DOM Updates

↓

Assertions Check Expected Outcome

↓

Test Pass or Fail

This flow shows how a user interaction triggers an event, updates the component, and then the test checks if the expected changes happened.

Execution Sample

Vue

import { mount } from '@vue/test-utils'
import Counter from './Counter.vue'

test('increments count on button click', async () => {
  const wrapper = mount(Counter)
  await wrapper.find('button').trigger('click')
  expect(wrapper.text()).toContain('Count: 1')
})

This test mounts a Counter component, simulates a button click, and checks if the count text updates.

Execution Table

Step	Action	Component State	DOM Text	Test Assertion
1	Mount Counter component	count = 0	Count: 0	N/A
2	Find button and trigger click	count = 1	Count: 1	N/A
3	Check if DOM text contains 'Count: 1'	count = 1	Count: 1	Pass

💡 Test ends after assertion passes confirming user interaction updated state and DOM

Variable Tracker

Variable	Start	After Click	Final
count	0	1	1

Key Moments - 2 Insights

Why do we use 'await' before triggering the click event?

Because Vue updates the DOM asynchronously after events, 'await' ensures the DOM updates before we check the assertion, as shown between steps 2 and 3 in the execution_table.

What does 'mount' do in the test?

'mount' creates a full Vue component instance with its template and reactive state, allowing us to simulate real user interactions, as seen in step 1.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'count' after step 2?

A 1

B 0

C undefined

D 2

💡 Hint

Check the 'Component State' column at step 2 in the execution_table.

At which step does the test check if the DOM text updated correctly?

A Step 1

B Step 3

C Step 2

D Test does not check DOM text

💡 Hint

Look at the 'Test Assertion' column in the execution_table.

If we remove 'await' before triggering the click, what might happen?

A Test will still pass immediately

B Component state won't change

C Test might fail because DOM update is not complete

D Button click won't trigger

💡 Hint

Refer to the key_moments explanation about asynchronous DOM updates.

Concept Snapshot

Testing user interactions in Vue:
- Mount the component with mount()
- Simulate user events with trigger()
- Use await to wait for DOM updates
- Assert expected DOM or state changes
- Helps confirm UI reacts correctly to users

Full Transcript

This visual execution shows how testing user interactions in Vue works. First, the component is mounted, creating its initial state and DOM. Then, a user event like a button click is simulated using trigger(). Because Vue updates the DOM asynchronously, we use await to wait for these changes. After the event, the component's state changes and the DOM updates to reflect this. Finally, the test asserts that the DOM contains the expected text, confirming the interaction worked. This process helps ensure the UI behaves as users expect.

Practice

1. What is the main purpose of using trigger in Vue Test Utils when testing user interactions?

easy

A. To simulate user events like clicks or typing on components

B. To mount the component before testing

C. To check the component's initial data state

D. To import Vue components into the test file

Solution

1. Step 1: Understand the role of trigger

   The trigger method simulates user events such as clicks or keyboard input on a mounted Vue component.

2. Step 2: Differentiate from other methods

   Mounting is done by mount, checking data is done by assertions, and importing components is unrelated to trigger.

3. Final Answer:

   To simulate user events like clicks or typing on components -> Option A

4. Quick Check:

   trigger simulates events = B [OK]

Hint: Remember: trigger = simulate user event [OK]

Common Mistakes:

• Confusing trigger with mount
• Thinking trigger checks data directly
• Assuming trigger imports components

2. Which of the following is the correct syntax to simulate a click event on a button with Vue Test Utils?

easy

A. wrapper.find('button').click()

B. wrapper.find('button').trigger('click')

C. wrapper.click('button')

D. wrapper.trigger('click')

Solution

1. Step 1: Identify the correct method to find and trigger

   First, find the button element using find('button'), then call trigger('click') on it.

2. Step 2: Check each option

   wrapper.find('button').click() uses click() which is not a Vue Test Utils method. wrapper.trigger('click') calls trigger on wrapper, not on the button. wrapper.click('button') uses a non-existent click method.

3. Final Answer:

   wrapper.find('button').trigger('click') -> Option B

4. Quick Check:

   Find element then trigger event = D [OK]

Hint: Find element first, then trigger event [OK]

Common Mistakes:

• Calling trigger on wrapper instead of element
• Using .click() instead of .trigger('click')
• Wrong method order or syntax

3. Given this Vue component test snippet:

const wrapper = mount({
  template: `Clicked {{ count }} times`,
  data() { return { count: 0 } }
})
await wrapper.find('button').trigger('click')
await wrapper.find('button').trigger('click')
console.log(wrapper.text())

What will be logged to the console?

medium

A. Clicked 0 times

B. Clicked 1 times

C. Clicked NaN times

D. Clicked 2 times

Solution

1. Step 1: Understand the component's data and event

   The button shows the count and increments it by 1 on each click.

2. Step 2: Count the number of clicks triggered

   Two clicks are triggered, so count increases from 0 to 2.

3. Final Answer:

   Clicked 2 times -> Option D

4. Quick Check:

   2 clicks increment count to 2 = C [OK]

Hint: Each trigger('click') adds 1 to count [OK]

Common Mistakes:

• Assuming count does not update
• Confusing async behavior
• Ignoring the number of triggers

4. In this test code:

const wrapper = mount({
  template: ``,
  data() { return { value: '' } },
  methods: {
    updateValue(event) { this.value = event.target.value }
  }
})
await wrapper.find('input').trigger('input', { target: { value: 'hello' } })
console.log(wrapper.vm.value)

What is the output and why?

medium

A. hello

B. empty string

C. undefined

D. Error: event object missing

Solution

1. Step 1: Understand how trigger passes event data

   The trigger method emits the event using the second argument as properties of the synthetic event object, so event.target.value is set to 'hello'.

2. Step 2: Check why value is updated

   The updateValue method reads event.target.value ('hello') and sets this.value = 'hello'.

3. Final Answer:

   hello -> Option A

4. Quick Check:

   trigger('input', {target:{value:'hello'}}) updates handler = B [OK]

Hint: trigger('input', {target:{value:'x'}}) feeds to @input handler [OK]

Common Mistakes:

• Triggering 'input' without payload
• Confusing with v-model inputs (use setValue)
• Confusing input event with change event

5. You want to test a Vue component with a text input that updates a message on typing. Which approach correctly simulates typing 'Vue' and verifies the message updates?

template: `
{{ message }}
`,
data() { return { text: '', message: '' } },
watch: { text(newVal) { this.message = `Typed: ${newVal}` } }

Which test code is correct?

hard

A. wrapper.find('input').element.value = 'Vue'
await wrapper.find('input').trigger('change')
expect(wrapper.text()).toContain('Typed: Vue')

B. await wrapper.find('input').trigger('input')
expect(wrapper.text()).toContain('Typed: Vue')

C. await wrapper.find('input').setValue('Vue')
expect(wrapper.text()).toContain('Typed: Vue')

D. wrapper.find('input').setAttribute('value', 'Vue')
await wrapper.find('input').trigger('input')
expect(wrapper.text()).toContain('Typed: Vue')

Solution

1. Step 1: Understand how to simulate typing in Vue Test Utils

   The setValue method sets the input value and triggers the input event properly, updating v-model and watchers.

2. Step 2: Evaluate each option's correctness

   A uses setValue correctly. B: await wrapper.find('input').trigger('input') expect(wrapper.text()).toContain('Typed: Vue') triggers input without event data so v-model unchanged. C manually sets value but triggers 'change' not updating v-model. D uses invalid setAttribute.

3. Final Answer:

   await wrapper.find('input').setValue('Vue') expect(wrapper.text()).toContain('Typed: Vue') -> Option C

4. Quick Check:

   Use setValue to simulate typing = A [OK]

Hint: Use setValue() to simulate typing and update v-model [OK]

Common Mistakes:

• Using trigger('input') without setValue()
• Manually changing element.value without events
• Using non-existent methods like setAttribute