vue-testing-best-practices

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

github.com/hairyfTesting & quality26112 installsUpdated 3w ago

About vue-testing-best-practices

A reference skill for developers testing Vue.js applications. It maps common testing problems to focused guidance, from async components and composables to browser-versus-Node runners.

Key features

01Guidance for common Vue testing issues
02Composables and lifecycle-hook testing
03Async component and Suspense testing
04Browser and Node runner considerations

Use cases

01Choosing an approach for Vue component tests
02Investigating flaky asynchronous tests
03Testing composables that use injection

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/hairyf/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: hairyf
Repository: hairyf/skills
Category: Testing & quality
Installs: 112
GitHub stars: 26

Report

More skills

All skills

hyperframes-cli

github.com/heygen-com

1.4M

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

871.8k

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