Vitest setup for unit testing in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Vitest test for a Vue component?

Given the following Vue component and Vitest test, what will the test output when run?

Vue

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

/* Vitest test file: HelloWorld.test.js */
import { mount } from '@vue/test-utils'
import { describe, it, expect } from 'vitest'
import HelloWorld from './HelloWorld.vue'

describe('HelloWorld', () => {
  it('renders greeting text', () => {
    const wrapper = mount(HelloWorld)
    expect(wrapper.text()).toBe('Hello Vitest')
  })
})

A The test passes because the component renders 'Hello Vitest' correctly.

B The test fails because the component does not render any text.

C The test throws a runtime error due to missing props.

D The test fails because the greeting is reactive and not rendered as plain text.

💡 Hint

Check what the component renders and what the test expects.

The component uses a ref with the string 'Hello Vitest' and renders it inside an

. The test mounts the component and checks the text content, which matches exactly, so the test passes.

📝 Syntax

intermediate

Which Vitest configuration snippet correctly sets up Vue testing?

Choose the correct Vitest config snippet to enable Vue component testing with proper plugins.

A

import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    environment: 'node'
  }
})

B

import { defineConfig } from 'vitest/config'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  test: {
    globals: false,
    environment: 'jsdom'
  },
  plugins: []
})

C

import { defineConfig } from 'vitest/config'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  test: {
    globals: true,
    environment: 'jsdom'
  },
  plugins: [vue()]
})

D

import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react'

export default defineConfig({
  test: {
    globals: true
  },
  plugins: [react()]
})

💡 Hint

Vue testing requires the Vue plugin and jsdom environment.

Option C correctly imports the Vue plugin and sets the test environment to 'jsdom' with globals enabled, which is needed for Vue component testing in Vitest.

🔧 Debug

advanced

Why does this Vitest test for a Vue component fail with 'TypeError: Cannot read property'?

Examine the test code below and select the reason for the TypeError during test execution.

Vue

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

describe('MyButton', () => {
  it('calls click handler', async () => {
    const onClick = vi.fn()
    const wrapper = mount(MyButton)
    await wrapper.trigger('click')
    expect(onClick).toHaveBeenCalled()
  })
})

A The component does not emit any events, so the test fails due to missing emits declaration.

B The test uses 'await' incorrectly on wrapper.trigger causing a syntax error.

C The click handler is not passed as a prop or event listener to the component, so onClick is never called.

D The vi.fn() mock function is not imported, causing a TypeError: Cannot read property 'fn' of undefined.

💡 Hint

Check the imports for mocking utilities.

The `vi` object from Vitest, which provides `vi.fn()` for creating mock functions, is not imported. Attempting `vi.fn()` throws TypeError: Cannot read property 'fn' of undefined.

❓ state_output

advanced

What is the value of 'count' after this Vitest test runs?

Given the Vue component and test below, what is the final value of the reactive 'count' after the test?

Vue

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

/* Counter.test.js */
import { mount } from '@vue/test-utils'
import { describe, it, expect } from 'vitest'
import Counter from './Counter.vue'

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

A 0

B 2

C 1

D NaN

💡 Hint

Each click triggers the increment function increasing count by 1.

The component starts with count 0. Each click triggers increment which adds 1. Two clicks increase count to 2, which the test expects and verifies.

🧠 Conceptual

expert

Which statement best describes Vitest's role in Vue unit testing?

Select the most accurate description of what Vitest provides when testing Vue components.

A Vitest is a test runner and assertion library that executes tests and verifies component behavior in a simulated browser environment.

B Vitest is a UI framework that replaces Vue for building user interfaces with built-in testing features.

C Vitest is a browser plugin that automatically records user interactions for test generation.

D Vitest is a CSS preprocessor that helps style Vue components and includes testing utilities.

💡 Hint

Think about what tools you need to run and check tests.

Vitest is a modern test runner and assertion library designed to run tests quickly and provide feedback. It works with Vue by simulating browser-like environments and checking component outputs.