Skip to content
Frontend
Skill

/vue-testing-best-practices

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

From plugin
antfu-skills
5.7k19 skills
Install
$ npx -y skills add antfu/skills --skill vue-testing-best-practices --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

  • Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
  • You can call itInvoke it directly when you want it.
  • Slash command/vue-testing-best-practices

Context preview

The summary Claude sees to decide when to auto-load this skill.

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

SKILL.md

vue-testing-best-practices.SKILL.md
name: vue-testing-best-practices
version: 1.0.0
license: MIT
author: github.com/vuejs-ai
description: Use for Vue.js testing. Covers Vitest, Vue Test Utils, component testing, mocking, testing patterns, and Playwright for E2E testing.

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

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/)
Read more
Ships withantfu-skills

A curated collection of Agent Skills reflecting Anthony Fu's preferences, experience, and best practices, along with usage documentation for the tools.

Get the whole plugin
Stats
5,770
Stars
319
Forks
Maintained
Maintenance
TypeScript
Language
MIT
License
1mo ago
Last commit
6mo ago
Created

Repo: antfu/skills

Other skills on antfu-skills.