mcpbeat

Vue Testing Best Practices

antfu/vue-testing-best-practices

Use for Vue.js testing. Covers Vitest, Vue Test Utils, component testing, mocking, testing patterns, and Playwright for E2E testing.

This is a copy. The original lives at christophacham/vue-testing-best-practices.

16k tokens
context cost
the whole folder, loaded on every use
14
files
instructions only
0
copies elsewhere
how many repositories repackaged it
5703
stars on the repo
on the repository, not the skill itself

Install

one command, takes just this skill from the repository
npx skills add https://github.com/antfu/skills --skill vue-testing-best-practices

The instruction itself

2 sections, as written by the author

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

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

How to use it

Copy the folder

Take antfu/vue-testing-best-practices from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.