vue-testing-best-practices

Name: vue-testing-best-practices
Author: antfu

github.com/antfuTesting & quality6.0k17.2k installsUpdated 6d ago

About vue-testing-best-practices

A reference skill for testing Vue.js applications, covering setup choices and common testing pitfalls. It is intended for Vue developers working with components, composables, and end-to-end tests.

Key features

01Vue 3 test setup guidance
02Black-box component testing
03Async and lifecycle test patterns
04Pinia and Suspense setup
05Browser versus Node runner guidance

Use cases

01Choosing a Vue test infrastructure
02Testing composables that use injection
03Diagnosing flaky asynchronous tests

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/antfu/skills --skill vue-testing-best-practices

After installing, type/vue-testing-best-practicesin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

LICENSE.md

SYNC.md

reference/

async-component-testing.md

teleport-testing-complexity.md

testing-async-await-flushpromises.md

testing-browser-vs-node-runners.md

testing-component-blackbox-approach.md

testing-composables-helper-wrapper.md

testing-e2e-playwright-recommended.md

testing-no-snapshot-only.md

testing-pinia-store-setup.md

testing-suspense-async-components.md

testing-vitest-recommended-for-vue.md

Details

From the project README

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

Comments

Markdown supported

Details

Author: antfu
Repository: antfu/skills
Category: Testing & quality
Installs: 17,184
GitHub stars: 6,019

Report

More skills

All skills

hyperframes-cli

github.com/heygen-com

1.3M

HyperFrames CLI dev loop. Use when running npx hyperframes init, add, catalog, capture, lint, validate, inspect, layout, snapshot, compare, grade-compare, preview, play, render, publish, feedback, lambda, doctor, browser, info, upgrade, skills, compositions, docs, benchmark, telemetry, transcribe, tts, or remove-background, or when troubleshooting the HyperFrames build/render environment. Entry point for AWS Lambda cloud rendering (hyperframes lambda deploy / render / progress / destroy / policies / sites).

tdd

github.com/mattpocock

1.2M

Test-driven development. Use when the user wants to build features or fix bugs test-first, mentions "red-green-refactor", or wants integration tests.

anti-ui-slop

uizze.com

932.8k

Stop coding agents from shipping generic UI. Use UIZZE's 800,000+ real web and iOS screens to build product-specific interfaces, define a design contract, cover required states, and run a hard finish gate. Use when designing, implementing, redesigning, critiquing, or pre-ship reviewing a web or iOS interface in Codex, Claude Code, Cursor, Copilot, or another coding agent. Trigger with "anti-ui-slop", "stop UI slop", "ground this UI in real screens", or "run the UI finish gate".

diagnosing-bugs

github.com/mattpocock

856.9k

Diagnosis loop for hard bugs and performance regressions. Use when the user says "diagnose"/"debug this", or reports something broken/throwing/failing/slow.