Component testing with Vue Test Utils - Mini Project: Build & Apply

Component testing with Vue Test Utils

📖 Scenario: You are building a simple Vue component that shows a greeting message. You want to write tests to check if the component renders the message correctly and updates it when a button is clicked.

🎯 Goal: Create a Vue component called GreetingMessage that displays a message from a prop. Then write tests using Vue Test Utils to check the rendered output and simulate a button click to change the message.

📋 What You'll Learn

Create a Vue component with a message prop

Render the message prop inside a <p> tag

Add a button that changes the message when clicked

Write a test to check the initial rendered message

Write a test to simulate the button click and check the updated message

💡 Why This Matters

🌍 Real World

Testing Vue components ensures your UI works as expected before users see it. It helps catch bugs early and improves code quality.

💼 Career

Vue Test Utils is a common tool used by frontend developers to write unit tests for Vue components, a key skill in many web development jobs.

1

Create the GreetingMessage component with a message prop

Create a Vue component called GreetingMessage using <script setup>. Define a prop named message of type String. Render the message prop inside a <p> tag.

Vue

// Define a prop named message of type String
// Your code here



   tag -->
  

Hint

Use defineProps to declare the message prop and display it inside a <p> tag in the template.

2

Add a button to change the message

Inside the GreetingMessage component, add a ref variable called currentMessage initialized with the message prop. Add a button with text Change Message. When the button is clicked, update currentMessage to the string 'Hello Vue Test Utils!'. Render currentMessage inside the <p> tag instead of props.message.

Vue

import { defineProps, ref } from 'vue'

const props = defineProps({
  message: String
})

// Create a ref variable currentMessage initialized with props.message
// Your code here



  {{ currentMessage }}
  
  

Hint

Use ref to create a reactive variable currentMessage. Add a button with a click event handler that updates currentMessage.

3

Write a test to check the initial rendered message

Create a test file for GreetingMessage. Import mount from @vue/test-utils and the GreetingMessage component. Write a test named 'renders initial message' that mounts GreetingMessage with the prop message set to 'Hello Vue!'. Use wrapper.text() to check that the rendered text contains 'Hello Vue!'.

Vue

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

test('renders initial message', () => {
  // Mount GreetingMessage with message prop 'Hello Vue!'
  // Your code here

  // Assert that wrapper.text() contains 'Hello Vue!'
  // Your code here
})

Hint

Use mount to create a wrapper of the component with the message prop. Then check the text content with wrapper.text().

4

Write a test to simulate button click and check updated message

In the test file, write a test named 'updates message on button click'. Mount GreetingMessage with the prop message set to 'Hello Vue!'. Use wrapper.find('button') to get the button and call trigger('click') on it. Then check that wrapper.text() contains 'Hello Vue Test Utils!'.

Vue

test('updates message on button click', async () => {
  const wrapper = mount(GreetingMessage, {
    props: { message: 'Hello Vue!' }
  })

  // Find the button and trigger a click event
  // Your code here

  // Assert that wrapper.text() contains 'Hello Vue Test Utils!'
  // Your code here
})

Hint

Use find to get the button element and trigger('click') to simulate the click. Then check the updated text.

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