Suggest an edit

Improve this article

Refine the answer for “What is Vue Test Utils?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**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

<template>
  <button @click="count++">{{ count }}</button>
</template>

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

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

#### What does VTU do in this test?

- `mount(Counter)` creates the component in jsdom
- `wrapper.trigger('click')` simulates a click
- Vue renders the DOM
- `wrapper.text()` returns the button's text

The test verifies real behavior.

---

## Key Vue Test Utils methods

### For rendering

- `mount()` - a full render
- `shallowMount()` - replaces children with stubs (Vue 2)

Vue 3 only uses `mount`, but you can manually stub children.

---

### For finding elements

- `wrapper.find('button')`
- `wrapper.findComponent(ChildComponent)`
- `wrapper.findAll(...)`

---

### For interaction

- `trigger('click')`
- `setValue('text')`
- `setChecked()`
- `setProps({ ... })`

---

### For checking state

- `wrapper.text()`
- `wrapper.html()`
- `wrapper.emitted()`
- `wrapper.props()`

---

## What can you test with VTU?

#### A component's logic

reactive state, computed properties, watchers.

#### The UI render

how the component looks with different props.

#### Events

whether `$emit` fires, whether methods are called.

#### Slots

rendering slots via `slots: {...}`.

#### Integration with child components

(or they can be stubbed).

Markdown · drag & drop images · ⌘B / ⌘I shortcuts386 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.