How do I install the Vue Testing Best Practices skill?

Run npx skillmds@latest add tomevault-io/vue-testing-best-practices-7 in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Vue Testing Best Practices safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Vue Testing Best Practices?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Vue Testing Best Practices free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Vue Testing Best Practices?

tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Vue Testing Best Practices by tomevault-io

Name: Vue Testing Best Practices
Author: tomevault-io

File contents

Vue.js testing best practices, patterns, and common gotchas.

E2E Selector Stability

Prefer data-testid selectors for critical flows instead of visible-text selectors that depend on locale or UI copy.
Add markers in Vue components as part of feature work when a flow lacks stable hooks for Playwright.
Keep selector ids semantic and consistent across specs; centralize reused ids in a shared selector map (for this repo: e2e/support/selectors.ts).

Testing

Setting up test infrastructure for Vue 3 projects -> See testing-vitest-recommended-for-vue
Tests keep breaking when refactoring component internals -> See testing-component-blackbox-approach
Tests fail intermittently with race conditions -> See testing-async-await-flushpromises
Composables using lifecycle hooks or inject fail to test -> See testing-composables-helper-wrapper
Getting "injection Symbol(pinia) not found" errors in tests -> See testing-pinia-store-setup
Components with async setup won't render in tests -> See testing-suspense-async-components
Snapshot tests keep passing despite broken functionality -> See testing-no-snapshot-only
Choosing end-to-end testing framework for Vue apps -> See testing-e2e-playwright-recommended
Tests need to verify computed styles or real DOM events -> See testing-browser-vs-node-runners
Testing components created with defineAsyncComponent fails -> See async-component-testing
Teleported modal content can't be found in wrapper queries -> See teleport-testing-complexity

Reference

Source: abondin/hreasy — distributed by TomeVault.

---name: vue-testing-best-practices-7description: Use for Vue.js testing. Covers Vitest, Vue Test Utils, component testing, mocking, testing patterns, and Playwright for E2E testing. Use when this capability is needed.---Vue.js testing best practices, patterns, and common gotchas.### E2E Selector Stability- Prefer `data-testid` selectors for critical flows instead of visible-text selectors that depend on locale or UI copy.- Add markers in Vue components as part of feature work when a flow lacks stable hooks for Playwright.- Keep selector ids semantic and consistent across specs; centralize reused ids in a shared selector map (for this repo: `e2e/support/selectors.ts`).### Testing- Setting up test infrastructure for Vue 3 projects -> See [testing-vitest-recommended-for-vue](reference/testing-vitest-recommended-for-vue.md)- Tests keep breaking when refactoring component internals -> See [testing-component-blackbox-approach](reference/testing-component-blackbox-approach.md)- Tests fail intermittently with race conditions -> See [testing-async-await-flushpromises](reference/testing-async-await-flushpromises.md)- Composables using lifecycle hooks or inject fail to test -> See [testing-composables-helper-wrapper](reference/testing-composables-helper-wrapper.md)- Getting "injection Symbol(pinia) not found" errors in tests -> See [testing-pinia-store-setup](reference/testing-pinia-store-setup.md)- Components with async setup won't render in tests -> See [testing-suspense-async-components](reference/testing-suspense-async-components.md)- Snapshot tests keep passing despite broken functionality -> See [testing-no-snapshot-only](reference/testing-no-snapshot-only.md)- Choosing end-to-end testing framework for Vue apps -> See [testing-e2e-playwright-recommended](reference/testing-e2e-playwright-recommended.md)- Tests need to verify computed styles or real DOM events -> See [testing-browser-vs-node-runners](reference/testing-browser-vs-node-runners.md)- Testing components created with defineAsyncComponent fails -> See [async-component-testing](reference/async-component-testing.md)- Teleported modal content can't be found in wrapper queries -> See [teleport-testing-complexity](reference/teleport-testing-complexity.md)## Reference- [Vue.js Testing Guide](https://vuejs.org/guide/scaling-up/testing)- [Vue Test Utils](https://test-utils.vuejs.org/)- [Vitest Documentation](https://vitest.dev/)- [Playwright Documentation](https://playwright.dev/)---> Source: [abondin/hreasy](https://github.com/abondin/hreasy) — distributed by [TomeVault](https://tomevault.io).

Frequently asked questions

Vue Testing Best Practices