vue-testing-utils

name	Vue Testing Utils
description	Test Vue 3 components with Vue Test Utils and Vitest — mount vs shallowMount, finding and triggering DOM, asserting props and emitted events, awaiting async updates, and mocking Pinia stores and Vue Router.
version	1.0.0
author	thetestingacademy
license	MIT
tags	["vue","vue-test-utils","component-testing","vitest","pinia","vue-router","jsdom","unit-testing","emits"]
testingTypes	["unit","integration"]
frameworks	["vue-test-utils","vitest","vue"]
languages	["typescript","javascript"]
domains	["web"]
agents	["claude-code","cursor","github-copilot","windsurf","codex","aider","continue","cline","zed","bolt","gemini-cli","amp"]

Vue Testing Utils

This skill makes an AI agent write Vue 3 component tests with @vue/test-utils on Vitest: mounting with props and slots, querying via data-testid, triggering events and awaiting the render queue, asserting emitted() payloads, and wiring createTestingPinia and mocked routers through global.plugins. Trigger it on any Vue 3 + Vite project where components need unit or integration tests.

Core Principles

1. Default to mount, reach for shallowMount rarely. Stubbing all children tests a skeleton, not the component. Shallow-render only when a child is genuinely heavy (charts, maps) — and stub that one child explicitly instead.
2. Test the rendered contract: props in, DOM and emitted events out. Never reach into wrapper.vm internals or assert on ref values; those tests survive refactors only by accident.
3. await every interaction. Vue batches DOM updates; trigger, setValue, and setProps all return promises that resolve after the next tick. A missing await asserts against the stale DOM.
4. Use data-testid or roles, not class selectors. Tailwind/scoped-CSS classes change with styling work; test IDs change only when behavior does.
5. Emitted events are the component's API — assert names and payloads. wrapper.emitted('save') returns the calls array; check both that it fired and what it carried.
6. Real Pinia logic, fake server. With createTestingPinia({ stubActions: false }) plus mocked HTTP you test store-component integration honestly; stubbed actions are for pure-render tests only.

Setup

npm install --save-dev @vue/test-utils vitest jsdom @pinia/testing @vitejs/plugin-vue

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

export default ({
  : [()],
  : {
    : ,
    : [],
    : ,
  },
});