Vue.js
Cypress component testing runs Vue components in a real browser — not jsdom, not a virtual DOM. This means your CSS is applied, browser APIs work correctly, and user interactions behave exactly as they do in production. Unlike Vitest + Vue Test Utils which runs in Node, Cypress component tests give you
Vue.js
Testing Vue Router involves three distinct scenarios: testing route guards in isolation (pure functions), testing components that use router composables (useRoute, useRouter), and testing the full router flow with real navigation. Each requires a different approach. This guide covers all three with Vitest and Vue Test Utils 2. Key Takeaways
Vue.js
Pinia stores are plain JavaScript/TypeScript objects — state, getters, and actions — which makes them easy to test directly without mounting Vue components. For unit tests, call setActivePinia(createPinia()) in beforeEach and import your stores normally. For component tests, use createTestingPinia() from @pinia/testing to mount components with full control over
Vue.js
Vitest is the fastest testing framework for Vue 3 projects. Because it shares the same Vite build pipeline as your application, it understands Vue SFCs natively, resolves aliases automatically, and runs significantly faster than Jest. This guide covers configuring Vitest for Vue, mocking Vue Router and Pinia, and setting up
Vue.js
Vue Test Utils 2 is the official testing library for Vue 3 components. It mounts components in a virtual DOM (or real browser with Cypress), lets you interact with them, and provides a rich API for asserting on rendered output, emitted events, and DOM structure. This guide covers the full
Vue.js
Vue.js testing covers three levels: unit tests for composables and utilities, component tests for Vue components with Vue Test Utils 2, and end-to-end tests with Cypress or Playwright. The recommended stack for Vue 3 projects is Vitest for unit and component tests (it integrates directly with Vite) plus Cypress