Why testing Vue apps matters - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a simple test that checks if a Vue component renders correctly.

Vue

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

test('renders message', () => {
  const wrapper = mount(HelloWorld)
  expect(wrapper.text()).toContain([1])
})

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

A"Hello World"

BHello World

C'Hello World'

DHelloWorld

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting quotes around the string

Using component name instead of text

We use a string with quotes to check if the rendered text contains 'Hello World'.

2fill in blank

medium

Complete the code to simulate a button click in a Vue test.

Vue

const wrapper = mount(ButtonComponent)
await wrapper.find('button').[1]
expect(wrapper.emitted()).toHaveProperty('click')

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

Aclick

Btrigger('click')

Cemit

Dfire

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'click()' directly

Using 'emit' instead of 'trigger'

We use trigger to simulate DOM events like clicks in Vue tests.

3fill in blank

hard

Fix the error in the test by completing the code to wait for Vue's DOM updates.

Vue

import { nextTick } from 'vue'

const wrapper = mount(Component)
wrapper.setData({ count: 1 })
await [1]()
expect(wrapper.text()).toContain('1')

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

AnextTick

BsetTimeout

CflushPromises

Dtick

Attempts:

3 left

💡 Hint

Common Mistakes

Using setTimeout instead of nextTick

Not waiting for DOM updates

Vue's nextTick waits for DOM updates after data changes.

4fill in blank

hard

Fill both blanks to create a computed property and use it in the template.

Vue

<template>
  <p>{{ [1] }}</p>
</template>

<script setup>
import { computed, ref } from 'vue'
const count = ref(0)
const [2] = computed(() => count.value * 2)
</script>

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

AdoubleCount

Bcount

Ccount * 2

Ddouble

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names in template and script

Using expressions directly in template

The computed property is named doubleCount and used in the template with the same name.

5fill in blank

hard

Fill all three blanks to create a reactive state, update it, and check the rendered output.

Vue

<template>
  <button @click="[1]">Increment</button>
  <p>{{ count }}</p>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)
function [2]() {
  count.value [3] 1
}
</script>

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

Aincrement

BincrementCount

C+=

D++

Attempts:

3 left

💡 Hint

Common Mistakes

Using different function names

Using ++ on ref directly

The button calls the increment function which increases count.value by 1 using +=.