Master Vue Testing - Vitest, Vue Test Utils, Component Testing, E2E with Playwright
Provides comprehensive Vue testing guidance covering Vitest, Vue Test Utils, and Playwright for unit, component, and E2E testing. Use when users need to set up testing environments, write component tests with proper mocking, test composables and Pinia stores, or create end-to-end Playwright tests.
/plugin marketplace add pluginagentmarketplace/custom-plugin-vue/plugin install vue-assistant@pluginagentmarketplace-vueThis skill inherits all available tools. When active, it can use any tool Claude has access to.
assets/config.yamlassets/schema.jsonreferences/GUIDE.mdreferences/PATTERNS.mdscripts/validate.pyProduction-grade skill for mastering Vue application testing with Vitest, Vue Test Utils, and Playwright.
Single Responsibility: Teach comprehensive testing strategies for Vue applications including unit, component, integration, and E2E testing.
interface VueTestingParams {
topic: 'unit' | 'component' | 'integration' | 'e2e' | 'mocking' | 'all';
level: 'beginner' | 'intermediate' | 'advanced';
context?: {
test_runner?: 'vitest' | 'jest';
e2e_tool?: 'playwright' | 'cypress';
coverage_target?: number;
};
}
Prerequisites: vue-fundamentals
Duration: 2 hours
Outcome: Set up testing environment
| Topic | Tool | Exercise |
|---|---|---|
| Setup | Vitest + VTU | Configure project |
| Test structure | describe/it/expect | First test |
| Assertions | expect matchers | Various assertions |
| Test naming | Descriptive names | Convention practice |
Vitest Configuration:
// vitest.config.ts
export default defineConfig({
plugins: [vue()],
test: {
globals: true,
environment: 'jsdom',
coverage: {
provider: 'v8',
thresholds: { lines: 80 }
}
}
})
Prerequisites: Module 1
Duration: 4-5 hours
Outcome: Test Vue components thoroughly
| Test Type | What to Test | Example |
|---|---|---|
| Rendering | DOM output | Text content |
| Props | Input handling | Prop values |
| Events | Emitted events | Button clicks |
| Slots | Slot content | Custom content |
| Async | Loading states | API responses |
Component Test Template:
import { mount } from '@vue/test-utils'
import MyComponent from './MyComponent.vue'
describe('MyComponent', () => {
it('renders correctly', () => {
const wrapper = mount(MyComponent, {
props: { title: 'Test' }
})
expect(wrapper.text()).toContain('Test')
})
it('emits event on click', async () => {
const wrapper = mount(MyComponent)
await wrapper.find('button').trigger('click')
expect(wrapper.emitted('action')).toHaveLength(1)
})
})
Prerequisites: Module 2
Duration: 3 hours
Outcome: Mock dependencies effectively
| Mock Type | Use Case | Example |
|---|---|---|
| Modules | API services | vi.mock() |
| Composables | Custom hooks | Return mocks |
| Timers | Debounce/setTimeout | vi.useFakeTimers() |
| HTTP | API calls | MSW or vi.mock |
| Router | Navigation | Mock router |
| Store | Pinia stores | createTestingPinia |
Prerequisites: Module 3
Duration: 3 hours
Outcome: Test reusable logic
Composable Testing:
import { useCounter } from './useCounter'
it('increments count', () => {
const { count, increment } = useCounter()
increment()
expect(count.value).toBe(1)
})
Store Testing:
import { setActivePinia, createPinia } from 'pinia'
import { useUserStore } from './useUserStore'
beforeEach(() => setActivePinia(createPinia()))
it('logs in user', async () => {
const store = useUserStore()
await store.login(credentials)
expect(store.isLoggedIn).toBe(true)
})
Prerequisites: Modules 1-4
Duration: 4 hours
Outcome: Write reliable E2E tests
| Concept | Playwright API | Exercise |
|---|---|---|
| Navigation | page.goto() | Page visits |
| Selectors | getByRole() | Element selection |
| Actions | click(), fill() | User interactions |
| Assertions | expect().toBeVisible() | Verify state |
| Fixtures | test.use() | Reusable setup |
Playwright Test:
import { test, expect } from '@playwright/test'
test.describe('Login', () => {
test('logs in successfully', async ({ page }) => {
await page.goto('/login')
await page.getByLabel('Email').fill('user@example.com')
await page.getByLabel('Password').fill('password')
await page.getByRole('button', { name: 'Submit' }).click()
await expect(page).toHaveURL('/dashboard')
await expect(page.getByText('Welcome')).toBeVisible()
})
})
const skillConfig = {
maxAttempts: 3,
backoffMs: [1000, 2000, 4000],
onFailure: 'provide_test_hint'
}
tracking:
- event: test_written
data: [test_type, component_name]
- event: coverage_achieved
data: [percentage, file_count]
- event: skill_completed
data: [tests_written, coverage]
| Issue | Cause | Solution |
|---|---|---|
| wrapper.vm undefined | shallowMount used | Use mount() |
| Mock not working | Wrong vi.mock path | Match import path |
| Async not resolved | Missing await | Await async ops |
| Flaky E2E | Race conditions | Add proper waits |
import { describe, it, expect, beforeEach, vi } from 'vitest'
import { mount, VueWrapper } from '@vue/test-utils'
import Component from './Component.vue'
describe('Component', () => {
let wrapper: VueWrapper
beforeEach(() => {
wrapper = mount(Component, {
props: {},
global: {
stubs: {},
mocks: {},
plugins: []
}
})
})
it('renders correctly', () => {
expect(wrapper.exists()).toBe(true)
})
it('handles user interaction', async () => {
await wrapper.find('button').trigger('click')
expect(wrapper.emitted('action')).toBeTruthy()
})
})
Skill("vue-testing")
vue-fundamentals - Prerequisitevue-composition-api - For composable testingvue-pinia - For store testingThis skill should be used when the user asks to "create a slash command", "add a command", "write a custom command", "define command arguments", "use command frontmatter", "organize commands", "create command with file references", "interactive command", "use AskUserQuestion in command", or needs guidance on slash command structure, YAML frontmatter fields, dynamic arguments, bash execution in commands, user interaction patterns, or command development best practices for Claude Code.
This skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.
This skill should be used when the user asks to "create a hook", "add a PreToolUse/PostToolUse/Stop hook", "validate tool use", "implement prompt-based hooks", "use ${CLAUDE_PLUGIN_ROOT}", "set up event-driven automation", "block dangerous commands", or mentions hook events (PreToolUse, PostToolUse, Stop, SubagentStop, SessionStart, SessionEnd, UserPromptSubmit, PreCompact, Notification). Provides comprehensive guidance for creating and implementing Claude Code plugin hooks with focus on advanced prompt-based hooks API.