Component testing with Vue Test Utils - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the rendered output of this Vue component test?

Given the following Vue component and test code, what will be the text content of the mounted component?

Vue

/* Component: HelloWorld.vue */
<template>
  <h1>{{ greeting }}</h1>
</template>
<script setup>
import { ref } from 'vue'
const greeting = ref('Hello Vue Test Utils')
</script>

/* Test file: HelloWorld.spec.js */
import { mount } from '@vue/test-utils'
import HelloWorld from './HelloWorld.vue'

test('renders greeting text', () => {
  const wrapper = mount(HelloWorld)
  expect(wrapper.text()).toBe('Hello Vue Test Utils')
})

A Hello Vue Test Utils

B greeting

C undefined

D <h1>Hello Vue Test Utils</h1>

💡 Hint

Check what wrapper.text() returns in Vue Test Utils.

The wrapper.text() method returns the text content inside the component's root element, which is 'Hello Vue Test Utils'. It does not include HTML tags or variable names.

❓ state_output

intermediate

What is the value of count after clicking the button twice?

Consider this Vue component and test. What will be the value of the count variable after the test simulates two button clicks?

Vue

<template>
  <button @click="increment">Count: {{ count }}</button>
</template>
<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() {
  count.value++
}
</script>

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

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

A 2

B 1

C 0

D NaN

💡 Hint

Each click triggers the increment function increasing count by 1.

The count starts at 0 and increments by 1 on each button click. After two clicks, count is 2, so the text includes 'Count: 2'.

🔧 Debug

advanced

Why does this Vue test fail with 'TypeError: wrapper.vm.increment is not a function'?

Examine the component and test code below. Why does the test fail with the error 'TypeError: wrapper.vm.increment is not a function'?

Vue

<template>
  <button @click="increment">Click me</button>
</template>
<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() {
  count.value++
}
</script>

// Test file
import { mount } from '@vue/test-utils'
import Clicker from './Clicker.vue'

test('calls increment method', () => {
  const wrapper = mount(Clicker)
  wrapper.vm.increment()
  expect(wrapper.text()).toContain('1')
})

A Because the button element is missing a click event

B Because the increment function is not imported in the test file

C Because the count variable is not reactive

D Because functions declared in <script setup> are not exposed on wrapper.vm

💡 Hint

Think about how