vue-testing_skill

Overview

This skill teaches production-grade testing for Vue applications using Vitest, Vue Test Utils, and Playwright. It covers unit, component, integration, and end-to-end strategies, plus effective mocking and store/composable testing. Outcomes include a repeatable test setup, reliable component tests, and stable E2E suites.

How this skill works

The skill guides you through progressive modules: environment setup with Vitest, component testing with Vue Test Utils, mocking strategies, composable and Pinia store testing, and Playwright E2E scenarios. It provides templates, configuration snippets, validation checkpoints, retry logic, and troubleshooting steps to turn learning into production-ready tests. Practical examples show mounting, event emission, mocking, and full-page flows.

When to use it

• When establishing a Vue test environment and coverage targets
• When writing or reviewing component tests and test structure
• When mocking APIs, composables, timers, or stores for reliable unit tests
• When validating business flows with Playwright E2E tests
• When improving test reliability and reducing flakiness in CI

Best practices

• Use mount() for full DOM behavior; shallowMount only when isolating child components
• Centralize mocks at the top of test files (vi.mock) and prefer MSW for HTTP mocking
• Set Vitest globals and jsdom environment for consistent DOM tests
• Isolate tests with beforeEach cleanup and setActivePinia(createPinia()) for store tests
• Add explicit awaits for async behavior and use Playwright fixtures for reusable setup

Example use cases

• Set up Vitest with Vue, run initial component tests and enforce 80% coverage threshold
• Test a button component: render text, assert props, trigger click, verify emitted event
• Mock an API service and test async loading/error states in a component
• Unit-test a composable: call functions and assert reactive values change
• Write Playwright E2E for login flow: fill fields, submit, assert navigation to dashboard