What is Vue Test Utils?

VueJunior~1 min read

Vue Test Utils (VTU) is the official library for testing Vue components. It provides a convenient API for mounting, interacting with, and verifying the behavior of components in unit and integration tests.

In other words:

Vue Test Utils is a tool that lets you write tests for Vue as if you were working with the components "live."

It's the primary tool for testing the logic and UI of Vue components.

What is Vue Test Utils needed for?

With VTU you can:

mount components in an isolated environment
simulate events: click, input, submit
change props
modify reactive state
test child-to-parent interaction
test slots
do a shallow render (without children)
wait asynchronously for renders
write snapshot tests
call a component's methods

It's the primary tool for verifying component behavior.

An example test with Vue Test Utils + Vitest

The component

vue

<!-- Counter.vue -->
<template>
  <button @click="count++">{{ count }}</button>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

The test

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')

    expect(wrapper.text()).toBe('1')
  })
})