vue-testing-best-practices

Name: vue-testing-best-practices
Author: vuejs-ai

github.com/vuejs-aiTesting & quality3.2k14.0k installsUpdated 5d ago

About vue-testing-best-practices

A Vue.js testing practice skill for developers working on Vue projects. It groups advice on test setup, component and composable tests, async behavior, and browser versus Node test runners, including common failure modes.

Key features

01Vue test infrastructure guidance
02Component black-box testing patterns
03Async and lifecycle testing advice
04Pinia and Suspense test setup
05Browser and Node runner considerations

Use cases

01Choosing a testing setup for Vue 3
02Investigating flaky asynchronous tests
03Testing composables that use lifecycle hooks
04Testing teleported or async components

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/vuejs-ai/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.

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: vuejs-ai
Repository: vuejs-ai/skills
Category: Testing & quality
Installs: 13,995
GitHub stars: 3,199

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.