vue-testing-best-practices

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

github.com/onmaxTesting & quality723262 installsUpdated 2d ago

About vue-testing-best-practices

A testing best-practices skill for Vue.js projects, covering test setup, components, async behavior, and end-to-end testing guidance.

Key features

01Vue 3 test infrastructure guidance
02Black-box component testing
03Async and composable testing
04End-to-end and browser test choices

Use cases

01Setting up tests for a Vue 3 project
02Diagnosing race conditions in async tests
03Choosing an end-to-end testing approach for a Vue app

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/onmax/nuxt-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: onmax
Repository: onmax/nuxt-skills
Category: Testing & quality
Installs: 262
GitHub stars: 723

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

867.8k

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