How to Use Vitest with Vue: Setup and Example

To use vitest with vue, install vitest and @vue/test-utils, then configure Vitest in your project. Write tests using Vue Test Utils to mount components and use Vitest's describe and it blocks to run assertions.

Syntax

Here is the basic syntax to test a Vue component with Vitest and Vue Test Utils:

• import { mount } from '@vue/test-utils': to mount the Vue component for testing.
• import { describe, it, expect } from 'vitest': to define test suites and assertions.
• describe(): groups related tests.
• it(): defines a single test case.
• expect(): makes assertions about the component behavior.

javascript

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

describe('MyComponent', () => {
  it('renders properly', () => {
    const wrapper = mount(MyComponent)
    expect(wrapper.text()).toContain('Hello')
  })
})

Example

This example shows a simple Vue component test using Vitest. It mounts the component and checks if the text renders correctly.

javascript

<!-- MyComponent.vue -->
<template>
  <div>Hello Vitest!</div>
</template>

<script setup>
// No script needed for this simple example
</script>

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

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

Output

 PASS  MyComponent.test.js
  MyComponent
    ✓ renders greeting text (5 ms)

Common Pitfalls

Common mistakes when using Vitest with Vue include:

• Not installing @vue/test-utils, which is needed to mount Vue components.
• Forgetting to configure Vitest properly in vite.config.js for Vue support.
• Trying to test components without mounting them, which leads to errors.
• Using shallowMount when full DOM rendering is needed, or vice versa.

Always ensure your test environment matches your component needs.

javascript

/* Wrong: missing mount, trying to test component text directly */
import MyComponent from './MyComponent.vue'
import { describe, it, expect } from 'vitest'

describe('MyComponent', () => {
  it('fails because component is not mounted', () => {
    expect(MyComponent.text).toBeDefined() // This will fail
  })
})

/* Right: mount component before testing */
import { mount } from '@vue/test-utils'
import MyComponent from './MyComponent.vue'

describe('MyComponent', () => {
  it('renders text correctly', () => {
    const wrapper = mount(MyComponent)
    expect(wrapper.text()).toContain('Hello')
  })
})

Quick Reference

Command	Purpose
npm install -D vitest @vue/test-utils	Install Vitest and Vue Test Utils
vitest	Run tests in the terminal
mount(Component)	Render Vue component for testing
describe(name, fn)	Group related tests
it(name, fn)	Define a test case
expect(value).matcher()	Make assertions

Key Takeaways

Install both vitest and @vue/test-utils to test Vue components.

Use mount() from Vue Test Utils to render components in tests.

Write tests inside describe() and it() blocks with expect() assertions.

Configure Vitest properly in vite.config.js for Vue support.

Avoid testing components without mounting to prevent errors.