Unit Testing With Vitest

Vitest is the standard test runner for Vue 3. It shares Vite's config and uses a Jest-compatible API — describe, it, expect.

4 min read Level 2/5 #vue#vitest#testing

What you'll learn

Install vitest
Write a describe / it / expect test
Run tests with vitest watch

Vitest is the de-facto unit test runner for Vue 3 projects. It reuses your Vite config so TypeScript, path aliases, and .vue imports work out of the box — and the API is Jest-compatible, so existing knowledge transfers.

Install

npm i -D vitest

Add a script:

{
  "scripts": {
    "test": "vitest"
  }
}

Configure

If you need test-only config, extend Vite:

// vitest.config.ts
import { defineConfig, mergeConfig } from 'vitest/config'
import viteConfig from './vite.config'

export default mergeConfig(viteConfig, defineConfig({
  test: {
    environment: 'jsdom',
    globals: true,
  },
}))

jsdom is needed when you mount components; pure logic tests can run in the default node environment.

A Composable Test

Composables are plain functions — easy to test in isolation.

// composables/useCounter.ts
import { ref } from 'vue'
export function useCounter() {
  const count = ref(0)
  const inc = () => count.value++
  return { count, inc }
}

// composables/useCounter.test.ts
import { describe, it, expect } from 'vitest'
import { useCounter } from './useCounter'

describe('useCounter', () => {
  it('starts at 0', () => {
    const { count } = useCounter()
    expect(count.value).toBe(0)
  })

  it('increments', () => {
    const { count, inc } = useCounter()
    inc()
    expect(count.value).toBe(1)
  })
})

Run

npm test            # watch mode
npm test -- --run   # one-shot, useful in CI

Component Testing →