Component testing with Vue Test Utils

Introduction

Component testing helps you check if your Vue parts work right. It finds mistakes early so your app stays strong.

You want to check if a button click changes text as expected.

You need to verify a form shows error messages when input is wrong.

You want to make sure a list displays the correct number of items.

You want to test if a component emits the right event when interacted with.

Syntax

Vue

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

test('description of test', () => {
  const wrapper = mount(ComponentName)
  // interact with wrapper or check output
  expect(wrapper.text()).toContain('expected text')
})

mount() creates a full instance of the component for testing.

Use expect() to check if the output or behavior matches what you want.

Examples

This test checks if the HelloWorld component shows the word 'Hello'.

Vue

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

test('shows greeting message', () => {
  const wrapper = mount(HelloWorld)
  expect(wrapper.text()).toContain('Hello')
})

This test clicks a button and checks if the count increases to 1.

Vue

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

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

This test checks if clicking a button emits a 'custom-event'.

Vue

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

test('emits custom event on action', async () => {
  const wrapper = mount(EmitEvent)
  await wrapper.find('button').trigger('click')
  expect(wrapper.emitted()).toHaveProperty('custom-event')
})

Sample Program

This example tests a simple counter button. The first test checks it starts at zero. The second test clicks the button and checks the count increases to 1.

Vue

import { mount } from '@vue/test-utils'
import { describe, test, expect } from 'vitest'

// Simple Vue component
const Counter = {
  template: `<button @click=\"count++\">Count: {{ count }}</button>`,
  data() {
    return { count: 0 }
  }
}

describe('Counter component', () => {
  test('starts at zero', () => {
    const wrapper = mount(Counter)
    expect(wrapper.text()).toBe('Count: 0')
  })

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

Important Notes

Use await with trigger to wait for Vue to update after events.

Mounting a component creates a real instance, so tests are close to how users see it.

Check emitted events with wrapper.emitted() to test communication between components.

Summary

Component testing checks if Vue parts behave as expected.

Use Vue Test Utils mount() to create a test instance.

Simulate user actions and check output or events to confirm correct behavior.

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