vue-testing-best-practices

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

github.com/liangmiqwqTesting & quality139 installsUpdated 1d ago

About vue-testing-best-practices

A Vue.js skill with testing practices, patterns, and common pitfalls. It guides Vue developers on test setup, component and composable tests, asynchronous behavior, and end-to-end testing.

Key features

01Vue 3 test setup guidance
02Component and composable testing patterns
03Async test and race-condition handling
04Browser and Node runner selection
05E2E framework recommendations

Use cases

01Choosing a test setup for Vue 3
02Testing composables that use lifecycle hooks
03Diagnosing asynchronous test flakiness
04Testing DOM events and computed styles

Install

Copy the command and run it in a terminal.

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

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.