// Guide for unit testing Vue 3 Composables using Vitest. Use this skill when writing tests for Vue logic to determine the correct testing strategy based on whether the composable is independent, relies on lifecycle hooks (onMounted), or uses dependency injection (provide/inject).
Use when creating or developing, before writing code or implementation plans - refines rough ideas into fully-formed designs through collaborative questioning, alternative exploration, and incremental validation. Don't use during clear 'mechanical' processes
Use when encountering any bug, test failure, or unexpected behavior, before proposing fixes - four-phase framework (root cause investigation, pattern analysis, hypothesis testing, implementation) that ensures understanding before attempting solutions
Use when errors occur deep in execution and you need to trace back to find the original trigger - systematically traces bugs backward through call stack, adding instrumentation when needed, to identify source of invalid data or incorrect behavior
Use when implementing any feature or bugfix, before writing implementation code - write the test first, watch it fail, write minimal code to pass; ensures tests actually verify behavior by requiring failure first
Use when design is complete and you need detailed implementation tasks for engineers with zero codebase context - creates comprehensive implementation plans with exact file paths, complete code examples, and verification steps assuming engineer has minimal domain knowledge
| name | test-vue-composable |
| description | Guide for unit testing Vue 3 Composables using Vitest. Use this skill when writing tests for Vue logic to determine the correct testing strategy based on whether the composable is independent, relies on lifecycle hooks (onMounted), or uses dependency injection (provide/inject). |
Analyze the source code of the composable to determine the testing strategy:
ref, computed, watch). Does not use Lifecycle hooks or inject.onMounted, onUnmounted).inject to retrieve dependencies.Test directly by invoking the function and asserting the returned state. No mocking of the Vue instance is required.
result.value.references/examples.md (Section: Independent)Requires a component context to trigger hooks like onMounted. Use the withSetup helper function.
test-utils.ts (or similar) exists containing the withSetup helper.
references/helpers.md.withSetup -> Call withSetup(() => useComposable()) -> Destructure result -> Assert.references/examples.md (Section: Lifecycle Dependent)Requires a provider context. Use the useInjectedSetup helper function.
test-utils.ts contains the useInjectedSetup helper.
references/helpers.md.useInjectedSetup -> Assert -> Call unmount().references/examples.md (Section: Injection Dependent)