Component testing with Vue Test Utils - Step-by-Step Execution

Concept Flow - Component testing with Vue Test Utils

Write Vue Component

↓

Import Vue Test Utils

↓

Mount Component

↓

Interact with Component

↓

Assert Expected Output

↓

Test Pass or Fail

This flow shows how to test a Vue component by mounting it, interacting with it, and checking the output.

Execution Sample

Vue

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

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

This test mounts a Counter component, clicks its button, and checks if the count increments.

Execution Table

Step	Action	Component State	Output/Result
1	Mount Counter component	count = 0	Rendered with text 'Count: 0' and a button
2	Find button element	count = 0	Button element selected
3	Trigger click event on button	count increments to 1	Component re-renders with text 'Count: 1'
4	Check if text contains 'Count: 1'	count = 1	Assertion passes
5	Test ends	count = 1	Test passes successfully

💡 Test ends after assertion passes confirming count increment

Variable Tracker

Variable	Start	After Step 3	Final
count	0	1	1

Key Moments - 3 Insights

Why do we need to mount the component before interacting with it?

Mounting creates a live instance of the component in a test environment, allowing us to simulate user actions and check real output, as shown in Step 1 and Step 3 of the execution table.

What does triggering the click event do to the component state?

Triggering the click calls the component's method that updates the count variable, causing the component to re-render with updated text, as seen in Step 3 and Step 4.

Why do we check the text content after clicking?

Checking the text confirms the component reacted correctly to the click by updating its display, which is the main goal of the test (Step 4).

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'count' after Step 3?

A 0

B undefined

C 1

D 2

💡 Hint

Check the 'Component State' column at Step 3 in the execution table.

At which step does the component re-render with updated text?

A Step 3

B Step 2

C Step 4

D Step 5

💡 Hint

Look for when the 'Output/Result' mentions re-rendering in the execution table.

If the button click did not increment count, which step would fail?

A Step 1

B Step 4

C Step 3

D Step 5

💡 Hint

Step 4 checks if the text contains the updated count, so failure would show there.

Concept Snapshot

Component testing with Vue Test Utils:
- Import mount from '@vue/test-utils'
- Mount the component to create a test instance
- Simulate user actions like clicks
- Assert the component output or state
- Tests confirm component behavior works as expected

Full Transcript

Component testing with Vue Test Utils involves mounting a Vue component in a test environment, simulating user interactions such as clicking a button, and then checking if the component updates its display or state correctly. The process starts by importing the mount function and the component to test. Mounting creates a live instance of the component. Then, we find elements inside the component and trigger events on them. After the event, the component updates its internal state and re-renders. Finally, we assert that the output matches what we expect, confirming the component behaves correctly. This step-by-step approach helps catch bugs early and ensures the component works as intended.

Practice

1. What is the primary purpose of using mount() from Vue Test Utils in component testing?

easy

A. To compile Vue components into production code

B. To deploy Vue components to a server

C. To style Vue components with CSS

D. To create a full instance of a Vue component for testing its behavior

Solution

1. Step 1: Understand the role of mount()

   mount() creates a real instance of a Vue component in a test environment.

2. Step 2: Identify what mount() is NOT for

   It is not used for compiling, styling, or deploying components.

3. Final Answer:

   To create a full instance of a Vue component for testing its behavior -> Option D

4. Quick Check:

   mount() creates component instance [OK]

Hint: Remember: mount() means create component instance [OK]

Common Mistakes:

• Confusing mount() with build or deploy tools
• Thinking mount() styles components
• Assuming mount() compiles code

2. Which of the following is the correct way to import mount from Vue Test Utils in a test file?

easy

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

B. import mount from 'vue-test-utils';

C. const mount = require('vue-test-utils');

D. import { mount } from 'vue';

Solution

1. Step 1: Check the official import syntax

   The correct import uses named import from '@vue/test-utils'.

2. Step 2: Identify incorrect import styles

   import mount from 'vue-test-utils'; uses default import incorrectly, C uses CommonJS require which is outdated here, A imports from wrong package.

3. Final Answer:

   import { mount } from '@vue/test-utils'; -> Option A

4. Quick Check:

   Correct import syntax = import { mount } from '@vue/test-utils'; [OK]

Hint: Use named import from '@vue/test-utils' [OK]

Common Mistakes:

• Using default import instead of named import
• Using require() instead of import
• Importing from wrong package

3. Given this test code snippet:

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

What will be logged to the console?

medium

A. 0

B. click

C. 1

D. undefined

Solution

1. Step 1: Understand the component behavior

   The button shows the current count, starting at 0, and increments count on click.

2. Step 2: Analyze the test actions

   The test triggers a click event on the button, increasing count from 0 to 1, then logs the button text.

3. Final Answer:

   1 -> Option C

4. Quick Check:

   Click increments count, text shows 1 [OK]

Hint: Click triggers count++ so text updates to 1 [OK]

Common Mistakes:

• Assuming text stays 0 after click
• Confusing event name with text output
• Forgetting to await trigger for update

4. What is wrong with this test code snippet?

const wrapper = mount(MyComponent);
wrapper.find('button').trigger('click');
expect(wrapper.text()).toContain('Clicked');

medium

A. Missing await before trigger to wait for DOM update

B. Incorrect selector used in find()

C. Missing import of mount from Vue Test Utils

D. Using expect() incorrectly without a matcher

Solution

1. Step 1: Identify asynchronous DOM update

   Triggering events may update DOM asynchronously, so awaiting trigger is needed.

2. Step 2: Check the code for await usage

   The code calls trigger() without await, so the expect() runs before DOM updates.

3. Final Answer:

   Missing await before trigger to wait for DOM update -> Option A

4. Quick Check:

   Await trigger() for DOM update [OK]

Hint: Always await trigger() to ensure DOM updates before assertions [OK]

Common Mistakes:

• Not awaiting trigger causing test to fail
• Assuming find() selector is wrong without checking
• Forgetting to import mount (not shown here)
• Misusing expect() matcher syntax

5. You want to test a component that emits a custom event submit with a payload object when a form is submitted. Which Vue Test Utils method correctly checks the event and its payload?

hard

A. expect(wrapper.find('form').trigger('submit')).toBeTruthy();

B. expect(wrapper.emitted().submit[0]).toEqual([{ name: 'John' }]);

C. expect(wrapper.text()).toContain('submit');

D. expect(wrapper.props().submit).toBeDefined();

Solution

1. Step 1: Understand event emission checking

   Vue Test Utils stores emitted events in wrapper.emitted(), accessible by event name and call index.

2. Step 2: Verify correct assertion for event payload

   expect(wrapper.emitted().submit[0]).toEqual([{ name: 'John' }]); checks the first submit event payload matches the expected object, which is correct.

3. Final Answer:

   expect(wrapper.emitted().submit[0]).toEqual([{ name: 'John' }]); -> Option B

4. Quick Check:

   Use emitted() to check event and payload [OK]

Hint: Use wrapper.emitted() to check events and payloads [OK]

Common Mistakes:

• Checking text instead of emitted events
• Testing props instead of events
• Not accessing emitted event payload array