Skills

Skill 16 of 19

Vue Testing Best Practices

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

1 minute · 110 words · 2 sections

Install

$ npx skills add antfu/skills --skill vue-testing-best-practices

$ npx skills add antfu/skills

The first command installs just this skill, by the name in its SKILL.md; the second installs the whole repository.

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

Testing

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

About this skill

Licence: MIT
Source: skills/vue-testing-best-practices/SKILL.md

Colophon for this issue

Colophon

How this issue was made

Source

github.com/antfu/skills, branch main, last pushed 23 June 2026.

Licence

MIT — the text of every skill is reproduced unmodified, frontmatter included, under the upstream licence.

Discovery

19 skills found by walking the repository tree for SKILL.md, not by matching a directory convention. One layout observed: skills/*/SKILL.md.

Issue colours

Resolved from a deterministic hash of the owner name. Two accent tones are generated per issue and each is proven against its own ground before it ships: a single accent that passes AA on both light and dark paper is arithmetically impossible.

Heading repairs

1 repair applied to this skill so the document has one h1 and no skipped levels:

Repaired “Testing” from h3 to h2, closing a skipped level.

Spec compliance

Every skill satisfies the Agent Skills specification’s frontmatter rules.

Images

Images inside a skill come from the upstream repository. Where the author gave no alternative text we mark the image decorative rather than inventing a description — a plausible caption we made up is worse than none for the reader who depends on it.

Signal

This repository is unranked on skills.sh, which says nothing about it: the leaderboard covers a fraction of published skills.

Agent surfaces

The whole issue is available as one markdown document at /antfu/skills.md, and each skill at its own .md URL.

Publication

Set by Skills Docs from the source repository. Body text is Literata at the reader’s chosen size and measure; code is Geist Mono. Nothing on this page was written by us except this paragraph.

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

Testing

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

Vue Testing Best Practices

Testing

Reference

About this skill

Colophon

Vue Testing Best Practices

Testing

Reference

Appendix 16.1–16.13

ReferencesMarkdown · 11 files

Also bundledMarkdown · 2 files

About this skill

Colophon

Appendix 16.1–16.13

ReferencesMarkdown · 11 files

Also bundledMarkdown · 2 files