What this prompt does
This prompt builds a comprehensive testing guide for Vue 3 plus TypeScript components using your chosen [test_framework], covering the [component_types] you actually ship. It walks through mounting options, testing props/emits/slots with type safety, isolating composables, integrating Pinia stores, and mocking APIs with your [mock_strategy] — then produces [test_count] worked example tests. It also covers router-dependent components, accessibility assertions, and when snapshot testing earns its place.
It works because it ties each testing pattern to a concrete component type rather than abstract advice. By listing [component_types] like a validated form or a debounced search, the AI writes tests that exercise real behaviour: user interactions via Testing Library, async loading mocked with MSW, router-dependent components on a memory router, and accessibility checks with vitest-axe. The [coverage_target] sets the bar, and a vitest.config.ts ties the setup together so the guide is runnable, not theoretical. Type-safe prop and store-integration tests are what catch regressions before they reach review.
When to use it
- Establishing a testing baseline for a Vue 3 plus TypeScript codebase so refactors feel safe
- Learning how to test props, emits and slots with full type safety
- Testing composables in isolation without mounting a whole component tree
- Integration-testing Pinia stores with createTestingPinia
- Deciding when snapshot testing helps versus when it just adds noise
- Setting and enforcing a
[coverage_target]for components in CI
Example output
You get a structured guide plus [test_count] example tests: mounting setups with global plugins and stubs, type-safe prop/emit/slot tests, an isolated composable test, a Pinia store integration test using createTestingPinia, async tests mocked with [mock_strategy], user-interaction tests for clicks and form submits, a snapshot-testing rationale, a router-dependent component test on a memory router, an accessibility test, and a vitest.config.ts with coverage configured to [coverage_target]% for components.
Pro tips
- List
[component_types]that mirror your real app (form with validation, data table with sorting) so the examples transfer directly - Pick
[test_framework]to match your build; Vitest plus @vue/test-utils pairs naturally with a Vite project and shares its config - Use a realistic
[mock_strategy]— MSW intercepts at the network layer and tends to be more robust than hand-stubbed fetch calls - Set
[coverage_target]to a number you'll actually enforce; 80% is a common, sustainable bar, and chasing 100% often tests trivial code - Ask for fewer, higher-value tests by tuning
[test_count]rather than padding the suite with shallow assertions - Test composables in isolation rather than always through a parent component, so their reactive state is asserted directly and stays fast
- Stub the router with a memory router for components that read route params, so they mount cleanly in tests without a full navigation setup
- Follow the guide's advice on when to avoid snapshots; they're useful for stable markup but brittle for frequently-changing components
