Snapshot Testing
Snapshot testing Vue components captures the rendered HTML output and alerts you when it changes. It's useful for catching unintended rendering changes — when a refactor modifies the markup structure, font classes, or element order in ways that aren't covered by functional tests. This guide covers snapshot
Test Automation
Pinia replaced Vuex as Vue's recommended state management solution, and it's dramatically more testable. Stores are plain objects with no magic mutations — actions are async functions, getters are computed properties, and state is just reactive data. This makes testing straightforward once you know the patterns. Setup:
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.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)