Testing Skill

Purpose

Generate test files and testing utilities for Vue 3 applications with proper coverage and best practices.

Test File Generation Rules

IMPORTANT: Test files MUST be generated alongside UI components, views, stores, directives, and utilities.

When generating any of the following, ALWAYS create a corresponding test file:

• •Vue Components (src/components/**/*.vue) → {ComponentName}.spec.ts in same directory
• •Views (src/views/**/*.vue) → {ViewName}.spec.ts in same directory
• •Store Modules (Vuex: src/store/modules/*.ts, Pinia: src/stores/*.ts) → {moduleName}.spec.ts in same directory
• •Directives (src/directives/*.ts) → {directiveName}.spec.ts in same directory
• •Utilities (src/shared/utils/*.ts) → {utilityName}.spec.ts in same directory
• •Mixins (src/shared/mixins/*.ts) → {mixinName}.spec.ts in same directory
• •Services (src/services/*.ts) → OPTIONAL - typically mocked in component tests

Test File Location

• •Test files live co-located with their source files (not in separate tests/ directory)
• •Naming convention: {filename}.spec.ts (use .spec.ts consistently)

Testing Frameworks

Jest Testing (if test_framework: jest)

• •Use Jest with Vue Test Utils (@vue/test-utils) for component testing
• •Use @vue/vue3-jest transformer for .vue files
• •Use ts-jest for TypeScript files
• •Mock external dependencies (axios, router, store)
• •Target >80% coverage for services and stores
• •Target >70% coverage for components
• •Test file naming: {filename}.spec.ts
• •Configuration: jest.config.cjs (handled by jest-config skill)

Vitest Testing (if test_framework: vitest)

• •Use Vitest with Vue Test Utils for component testing
• •Native ESM support with faster execution
• •Use @vitest/ui for interactive test UI
• •Mock external dependencies (axios, router, store)
• •Target >80% coverage for services and stores
• •Target >70% coverage for components
• •Test file naming: {filename}.spec.ts or {filename}.test.ts
• •Configuration: vitest.config.ts (handled by vitest-config skill)

Test Coverage Requirements

• •Components: >70% coverage (focus on user interactions, computed properties, methods)
• •Views: >70% coverage (lifecycle, navigation, major workflows)
• •Stores: >80% coverage (state mutations, actions, getters)
• •Utilities: >80% coverage (all functions and edge cases)
• •Directives: >70% coverage (behavior and DOM manipulation)

Test Organization Best Practices

1. •Describe blocks: Group related tests logically
   • •Component/View name as top-level describe
   • •Group by: lifecycle hooks, computed properties, methods, events
2. •Test naming: Use descriptive test names that explain expected behavior
3. •AAA Pattern: Arrange, Act, Assert in each test
4. •Mocking: Mock external dependencies (API calls, router, store)
5. •Cleanup: Use afterEach to clear mocks and reset state
6. •Isolation: Each test should be independent and not rely on others

Example Files

See: examples.md in this directory for complete test templates:

• •Component tests (Options API)
• •Component tests (Composition API)
• •View tests
• •Store tests (Vuex)
• •Store tests (Pinia)

Notes

• •Test templates vary based on vue_api_pattern (composition-api vs options-api)
• •Test templates vary based on state_management (pinia vs vuex)
• •All test files should use the same testing framework specified in configuration
• •Co-location of tests with source files improves maintainability