[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6J4RVQJ5B778WAVXD024S15":3,"skill-same:01M6J4RVQJ5B778WAVXD024S15":143},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":26,"publishedAt":49,"linkOnly":50,"markdownContent":51,"markdownBody":52,"frontMatter":53,"refName":54,"commitSha":55,"skillDirectory":56,"forksCount":57,"repositoryHtmlUrl":58,"repositoryHomepageUrl":59,"ownerHtmlUrl":60,"ownerBlogUrl":6,"ownerDescription":61,"updatedAt":62,"install":63,"resources":76},"01M6J4RVQJ5B778WAVXD024S15","mk-vue-testing-best-practices",null,"Vue 3 testing best-practices review: Vitest + Vue Test Utils for components, composables, Pinia, Router, async\u002FSuspense, forms, a11y, plus Playwright E2E strategy. Advisory only.","ngocsangyem\u002FMeowKit","ngocsangyem","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F33769536?v=4","01M6J3FSMJAG9PVQEGRT7AQ9J2","Sang Nguyen","01M6J3FSRTJG0MNP6NV71639RM",16,"MIT","https:\u002F\u002Fgithub.com\u002Fngocsangyem\u002FMeowKit\u002Fblob\u002Fmain\u002Fpackages\u002Fmewkit\u002Fsrc\u002Fmigrate\u002Fmodules\u002Fcodex\u002Froot\u002F.agents\u002Fskills\u002Fmk-vue-testing-best-practices\u002FSKILL.md",[18,23],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发",[27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48],"mk vue","best practices","vue","mk vue testing best practices","testing best practices","vue testing best practices","testing","router","a11y","for","utils","advisory","forms","best-practices","async","only","strategy","pinia","vitest","e2e","components","review","2026-11-10 10:12:30",false,"---\nname: \"mk-vue-testing-best-practices\"\ndescription: \"Vue 3 testing best-practices review: Vitest + Vue Test Utils for components, composables, Pinia, Router, async\u002FSuspense, forms, a11y, plus Playwright E2E strategy. Advisory only.\"\n---\n\n# Vue Testing Best Practices\n\nVue-specific **test-design advisor + test-code reviewer**. Recommends how to test Vue 3\ncomponents, composables, Pinia stores, Vue Router, async\u002FSuspense, Teleport, forms, and\naccessibility — and audits existing Vitest + Vue Test Utils tests for smells, gaps, and\ncoverage risk. Read-only: it advises and reviews; it never runs, generates, or fixes tests.\n\nThis skill is to `mk:testing` what `mk:vue-best-practices` is to `mk:vue` — a\ndomain-specialized advisory that you invoke deliberately.\n\n## When to Use\n\n**Invoke-only** — this skill does NOT auto-activate. Activate it for:\n\n- `the vue-testing-best-practices skill [test file or component]` (explicit).\n- \"review my Vue tests\", \"how should I test this component\u002Fcomposable\u002Fstore\", \"Vue test\n  best practices\", \"Vitest or Jest for this Vue app?\", \"are my async component tests correct?\".\n\n**Do NOT invoke for** (each routes to its owner):\n\n- Running tests \u002F TDD red-green \u002F non-Vue tests \u002F generic Playwright runner protocol → `mk:testing`\n- Diff\u002FPR structural review or test-_existence_ gap detection → `mk:review`\n- Coverage→requirement mapping → `mk:nyquist`\n- QA of a running app + bug fixes → `mk:qa`\n- Generating or running Playwright `.spec.ts` E2E → `mk:qa-manual`\n- Driving a live browser → `mk:agent-browser` \u002F `mk:playwright-cli`\n- Writing Vue feature code → `mk:vue` \u002F `mk:vue-best-practices`\n\n## Invocation Decision Guide\n\n| You want to…                                                   | Use                                      |\n| -------------------------------------------------------------- | ---------------------------------------- |\n| Write\u002Frefactor Vue feature code                                | `mk:vue`                                 |\n| Review Vue _feature_ code \u002F authoring workflow                 | `mk:vue-best-practices`                  |\n| **Design or review Vue _test_ code; choose test tooling**      | **this skill**                           |\n| Actually run tests \u002F TDD loop \u002F non-Vue tests                  | `mk:testing`                             |\n| Diff\u002FPR review or \"does a test exist for this change?\"         | `mk:review`                              |\n| Map test coverage → requirements (which criteria are untested) | `mk:nyquist`                             |\n| \"does the running site work? find + fix bugs\"                  | `mk:qa`                                  |\n| Generate runnable Playwright E2E specs from a spec\u002FURL         | `mk:qa-manual`                           |\n| Drive a real browser                                           | `mk:agent-browser` \u002F `mk:playwright-cli` |\n\n### Disambiguation vs mk:vue-best-practices\n\nThe seam is _authoring_ vs _test-setup_:\n\n- Review how a component **uses** Teleport (when to use it, the API, the fallback boundary)\n  → `mk:vue-best-practices`.\n- Review how a **test** stubs Teleport (`teleport` stub, `attachTo: document.body`, querying\n  portalled content) → **this skill**.\n\nTeleport\u002FSuspense **authoring** (when to use, API, fallback) → `mk:vue-best-practices`;\nTeleport\u002FSuspense **test-setup** (stubs, `flushPromises`, `attachTo`, `mountSuspense`) →\nthis skill.\n\n## Testing — Problem → Reference\n\nRead one level deep from this file. Load only the reference that matches the surface.\n\n| Problem \u002F intent                                           | Reference                                          |\n| ---------------------------------------------------------- | -------------------------------------------------- |\n| Setting up test infrastructure for a Vue 3 project         | `reference\u002Ftesting-vitest-recommended-for-vue.md`  |\n| Tests break when refactoring component internals           | `reference\u002Ftesting-component-blackbox-approach.md` |\n| Flaky\u002Fintermittent tests, async DOM not updated            | `reference\u002Ftesting-async-await-flushpromises.md`   |\n| Composables using lifecycle hooks or `inject` fail to test | `reference\u002Ftesting-composables-helper-wrapper.md`  |\n| \"injection Symbol(pinia) not found\" errors                 | `reference\u002Ftesting-pinia-store-setup.md`           |\n| Components with async `setup()` won't render               | `reference\u002Ftesting-suspense-async-components.md`   |\n| Snapshot tests pass despite broken functionality           | `reference\u002Ftesting-no-snapshot-only.md`            |\n| Choosing an end-to-end framework for a Vue app             | `reference\u002Ftesting-e2e-playwright-recommended.md`  |\n| Need to verify computed styles or real DOM events          | `reference\u002Ftesting-browser-vs-node-runners.md`     |\n| `defineAsyncComponent` components fail in tests            | `reference\u002Fasync-component-testing.md`             |\n| Teleported content can't be found in wrapper queries       | `reference\u002Fteleport-testing-complexity.md`         |\n| Testing routing: `useRoute`\u002F`useRouter`, navigation guards | `reference\u002Fvue-router-testing.md`                  |\n| Testing forms: inputs, validation, submit payloads         | `reference\u002Fform-testing.md`                        |\n| Asserting accessibility in tests (roles, focus, keyboard)  | `reference\u002Faccessibility-testing.md`               |\n| Reviewing tests for smells (the severity rubric)           | `reference\u002Ftest-smells-rubric.md`                  |\n\n## Workflow\n\nRead-only advisory lifecycle. Classify the surface → load the matching reference JIT →\nevaluate against the rubric → emit a bounded review.\n\n1. **Input** — intent + the Vue test file(s) under review, or the component\u002Fcomposable\u002Fstore\n   the user wants to design tests for.\n2. **Testing analysis** — classify the surface: component \u002F composable \u002F store \u002F router \u002F\n   form \u002F async \u002F Suspense \u002F Teleport \u002F E2E-design. Load the matching reference(s).\n3. **Best-practice evaluation** — apply `reference\u002Ftest-smells-rubric.md`: blackbox vs\n   implementation-coupled? async awaited (`flushPromises`\u002F`nextTick`)? Pinia configured?\n   Suspense\u002FTeleport set up? snapshot policy? a11y queries? brittle locators?\n4. **Gap detection** — missing scenarios (error\u002Fasync\u002Fedge\u002Fa11y states), test smells,\n   Vue-specific coverage risks.\n5. **Recommendations** — concrete pattern fixes, tooling advice, and handoff notes.\n6. **Output** — a bounded **Vue Testing Review** (see Output Contract).\n\n**Entry criteria:** a Vue 3 project, and the user wants test design, test review, or test\ntooling advice.\n\n**Stop conditions (hand off, do not attempt):**\n\n| Request                               | Hand off to                              |\n| ------------------------------------- | ---------------------------------------- |\n| Execute \u002F run tests, TDD loop         | `mk:testing`                             |\n| Generate runnable E2E `.spec.ts`      | `mk:qa-manual`                           |\n| Drive a live browser                  | `mk:agent-browser` \u002F `mk:playwright-cli` |\n| Coverage→requirement map              | `mk:nyquist`                             |\n| QA a running app + fix bugs           | `mk:qa`                                  |\n| Diff\u002FPR review or test-existence gaps | `mk:review`                              |\n| Root-cause a failing test\u002Fbug         | `mk:investigate`                         |\n\n**Escalation:** non-Vue test code → `mk:testing`; running-app bugs → `mk:qa`; root-cause\ndebugging → `mk:investigate`; coverage map → `mk:nyquist`.\n\n## Output Contract\n\nEmit a single **Vue Testing Review**. Omit any empty section rather than padding it. Do not\nrestate Vue basics (defer to `mk:vue`), dump whole files, or recite generic testing theory.\n\n1. **Verdict** — one line: `PASS` \u002F `NEEDS-WORK` + a one-sentence why.\n2. **Test Smells** — one row each: `[severity] · file:line · smell · fix`. Severity vocab:\n   `critical | high | medium | low`. (e.g. implementation-coupling, snapshot-only, missing\n   `await flushPromises`, missing Pinia setup, brittle CSS locator.)\n3. **Missing Scenarios** — untested behaviors: error states, async\u002Floading, edge inputs,\n   a11y states.\n4. **Coverage Risks** — Vue-specific blind spots: Teleported content, Suspense fallback,\n   store actions, router guards. Note: _existence-level_ diff coverage gaps are produced\n   automatically by `mk:review` `..\u002Freview\u002Freferences\u002Ftest-coverage.md` during a full review — this\n   section audits test _quality_, not existence.\n5. **Tooling Recommendations** — Vitest \u002F runner (happy-dom vs Browser Mode) \u002F library\n   (`@vue\u002Ftest-utils` vs `@testing-library\u002Fvue`) \u002F Playwright-vs-Cypress choices, each with a\n   one-line rationale.\n6. **Handoffs** — explicit next-skill pointers when applicable (execute → `mk:testing`,\n   E2E gen → `mk:qa-manual`, coverage map → `mk:nyquist`).\n\n### Worked example — design request\n\n> \"How should I test this Pinia-backed `UserProfile` component?\"\n\n```\nVerdict: NEEDS-WORK — no Pinia provided, so the component will throw on mount.\nTooling: Vitest + happy-dom; @vue\u002Ftest-utils + createTestingPinia({ createSpy: vi.fn }).\nMissing Scenarios: loading state, fetch error, empty profile.\nHandoffs: write + run the suite → mk:testing.\n```\n\n### Worked example — review request\n\n> \"Review `tests\u002FSearchBar.spec.ts`.\"\n\n```\nVerdict: NEEDS-WORK — assertions race ahead of async DOM updates.\nTest Smells:\n  [high] · SearchBar.spec.ts:21 · setValue not awaited · `await wrapper.find('input').setValue(...)`\n  [medium] · SearchBar.spec.ts:30 · brittle `.btn-primary` locator · query by role\u002Ftext or data-testid\nMissing Scenarios: empty-query, no-results, API error.\n```\n\n## Gotchas\n\n- **Missing `await flushPromises()` after an API call** — `await nextTick()` only flushes\n  reactive DOM updates, not pending promises; an API-driven assertion runs against stale state\n  and the test flakes. Use `flushPromises()` (sometimes twice for chained async).\n- **Snapshot-only tests pass while behavior breaks** — a snapshot asserts markup shape, not\n  behavior; pair every snapshot with behavioral assertions (text\u002Frole\u002Femitted), or it gives\n  false confidence.\n- **\"injection Symbol(pinia) not found\"** — mounting a store-backed component without\n  `createTestingPinia` (component tests) or `setActivePinia(createPinia())` (store unit tests)\n  throws on mount. Provide Pinia before asserting.\n- **Teleported content isn't in the wrapper** — `\u003CTeleport>` moves DOM out of the component\n  subtree, so `wrapper.find()` misses it; stub Teleport or `attachTo: document.body` and query\n  the document.\n\n## Reference\n\n- [Vue.js Testing Guide](https:\u002F\u002Fvuejs.org\u002Fguide\u002Fscaling-up\u002Ftesting)\n- [Vue Test Utils](https:\u002F\u002Ftest-utils.vuejs.org\u002F)\n- [Vitest Documentation](https:\u002F\u002Fvitest.dev\u002F)\n- [Playwright Documentation](https:\u002F\u002Fplaywright.dev\u002F)\n\n## Provenance\n\nPorted and extended from an upstream Vue testing skill — see [SYNC.md](SYNC.md) for the\nupstream path, pinned commit, and which references are vendored-verbatim vs toolkit.","# Vue Testing Best Practices\n\nVue-specific **test-design advisor + test-code reviewer**. Recommends how to test Vue 3\ncomponents, composables, Pinia stores, Vue Router, async\u002FSuspense, Teleport, forms, and\naccessibility — and audits existing Vitest + Vue Test Utils tests for smells, gaps, and\ncoverage risk. Read-only: it advises and reviews; it never runs, generates, or fixes tests.\n\nThis skill is to `mk:testing` what `mk:vue-best-practices` is to `mk:vue` — a\ndomain-specialized advisory that you invoke deliberately.\n\n## When to Use\n\n**Invoke-only** — this skill does NOT auto-activate. Activate it for:\n\n- `the vue-testing-best-practices skill [test file or component]` (explicit).\n- \"review my Vue tests\", \"how should I test this component\u002Fcomposable\u002Fstore\", \"Vue test\n  best practices\", \"Vitest or Jest for this Vue app?\", \"are my async component tests correct?\".\n\n**Do NOT invoke for** (each routes to its owner):\n\n- Running tests \u002F TDD red-green \u002F non-Vue tests \u002F generic Playwright runner protocol → `mk:testing`\n- Diff\u002FPR structural review or test-_existence_ gap detection → `mk:review`\n- Coverage→requirement mapping → `mk:nyquist`\n- QA of a running app + bug fixes → `mk:qa`\n- Generating or running Playwright `.spec.ts` E2E → `mk:qa-manual`\n- Driving a live browser → `mk:agent-browser` \u002F `mk:playwright-cli`\n- Writing Vue feature code → `mk:vue` \u002F `mk:vue-best-practices`\n\n## Invocation Decision Guide\n\n| You want to…                                                   | Use                                      |\n| -------------------------------------------------------------- | ---------------------------------------- |\n| Write\u002Frefactor Vue feature code                                | `mk:vue`                                 |\n| Review Vue _feature_ code \u002F authoring workflow                 | `mk:vue-best-practices`                  |\n| **Design or review Vue _test_ code; choose test tooling**      | **this skill**                           |\n| Actually run tests \u002F TDD loop \u002F non-Vue tests                  | `mk:testing`                             |\n| Diff\u002FPR review or \"does a test exist for this change?\"         | `mk:review`                              |\n| Map test coverage → requirements (which criteria are untested) | `mk:nyquist`                             |\n| \"does the running site work? find + fix bugs\"                  | `mk:qa`                                  |\n| Generate runnable Playwright E2E specs from a spec\u002FURL         | `mk:qa-manual`                           |\n| Drive a real browser                                           | `mk:agent-browser` \u002F `mk:playwright-cli` |\n\n### Disambiguation vs mk:vue-best-practices\n\nThe seam is _authoring_ vs _test-setup_:\n\n- Review how a component **uses** Teleport (when to use it, the API, the fallback boundary)\n  → `mk:vue-best-practices`.\n- Review how a **test** stubs Teleport (`teleport` stub, `attachTo: document.body`, querying\n  portalled content) → **this skill**.\n\nTeleport\u002FSuspense **authoring** (when to use, API, fallback) → `mk:vue-best-practices`;\nTeleport\u002FSuspense **test-setup** (stubs, `flushPromises`, `attachTo`, `mountSuspense`) →\nthis skill.\n\n## Testing — Problem → Reference\n\nRead one level deep from this file. Load only the reference that matches the surface.\n\n| Problem \u002F intent                                           | Reference                                          |\n| ---------------------------------------------------------- | -------------------------------------------------- |\n| Setting up test infrastructure for a Vue 3 project         | `reference\u002Ftesting-vitest-recommended-for-vue.md`  |\n| Tests break when refactoring component internals           | `reference\u002Ftesting-component-blackbox-approach.md` |\n| Flaky\u002Fintermittent tests, async DOM not updated            | `reference\u002Ftesting-async-await-flushpromises.md`   |\n| Composables using lifecycle hooks or `inject` fail to test | `reference\u002Ftesting-composables-helper-wrapper.md`  |\n| \"injection Symbol(pinia) not found\" errors                 | `reference\u002Ftesting-pinia-store-setup.md`           |\n| Components with async `setup()` won't render               | `reference\u002Ftesting-suspense-async-components.md`   |\n| Snapshot tests pass despite broken functionality           | `reference\u002Ftesting-no-snapshot-only.md`            |\n| Choosing an end-to-end framework for a Vue app             | `reference\u002Ftesting-e2e-playwright-recommended.md`  |\n| Need to verify computed styles or real DOM events          | `reference\u002Ftesting-browser-vs-node-runners.md`     |\n| `defineAsyncComponent` components fail in tests            | `reference\u002Fasync-component-testing.md`             |\n| Teleported content can't be found in wrapper queries       | `reference\u002Fteleport-testing-complexity.md`         |\n| Testing routing: `useRoute`\u002F`useRouter`, navigation guards | `reference\u002Fvue-router-testing.md`                  |\n| Testing forms: inputs, validation, submit payloads         | `reference\u002Fform-testing.md`                        |\n| Asserting accessibility in tests (roles, focus, keyboard)  | `reference\u002Faccessibility-testing.md`               |\n| Reviewing tests for smells (the severity rubric)           | `reference\u002Ftest-smells-rubric.md`                  |\n\n## Workflow\n\nRead-only advisory lifecycle. Classify the surface → load the matching reference JIT →\nevaluate against the rubric → emit a bounded review.\n\n1. **Input** — intent + the Vue test file(s) under review, or the component\u002Fcomposable\u002Fstore\n   the user wants to design tests for.\n2. **Testing analysis** — classify the surface: component \u002F composable \u002F store \u002F router \u002F\n   form \u002F async \u002F Suspense \u002F Teleport \u002F E2E-design. Load the matching reference(s).\n3. **Best-practice evaluation** — apply `reference\u002Ftest-smells-rubric.md`: blackbox vs\n   implementation-coupled? async awaited (`flushPromises`\u002F`nextTick`)? Pinia configured?\n   Suspense\u002FTeleport set up? snapshot policy? a11y queries? brittle locators?\n4. **Gap detection** — missing scenarios (error\u002Fasync\u002Fedge\u002Fa11y states), test smells,\n   Vue-specific coverage risks.\n5. **Recommendations** — concrete pattern fixes, tooling advice, and handoff notes.\n6. **Output** — a bounded **Vue Testing Review** (see Output Contract).\n\n**Entry criteria:** a Vue 3 project, and the user wants test design, test review, or test\ntooling advice.\n\n**Stop conditions (hand off, do not attempt):**\n\n| Request                               | Hand off to                              |\n| ------------------------------------- | ---------------------------------------- |\n| Execute \u002F run tests, TDD loop         | `mk:testing`                             |\n| Generate runnable E2E `.spec.ts`      | `mk:qa-manual`                           |\n| Drive a live browser                  | `mk:agent-browser` \u002F `mk:playwright-cli` |\n| Coverage→requirement map              | `mk:nyquist`                             |\n| QA a running app + fix bugs           | `mk:qa`                                  |\n| Diff\u002FPR review or test-existence gaps | `mk:review`                              |\n| Root-cause a failing test\u002Fbug         | `mk:investigate`                         |\n\n**Escalation:** non-Vue test code → `mk:testing`; running-app bugs → `mk:qa`; root-cause\ndebugging → `mk:investigate`; coverage map → `mk:nyquist`.\n\n## Output Contract\n\nEmit a single **Vue Testing Review**. Omit any empty section rather than padding it. Do not\nrestate Vue basics (defer to `mk:vue`), dump whole files, or recite generic testing theory.\n\n1. **Verdict** — one line: `PASS` \u002F `NEEDS-WORK` + a one-sentence why.\n2. **Test Smells** — one row each: `[severity] · file:line · smell · fix`. Severity vocab:\n   `critical | high | medium | low`. (e.g. implementation-coupling, snapshot-only, missing\n   `await flushPromises`, missing Pinia setup, brittle CSS locator.)\n3. **Missing Scenarios** — untested behaviors: error states, async\u002Floading, edge inputs,\n   a11y states.\n4. **Coverage Risks** — Vue-specific blind spots: Teleported content, Suspense fallback,\n   store actions, router guards. Note: _existence-level_ diff coverage gaps are produced\n   automatically by `mk:review` `..\u002Freview\u002Freferences\u002Ftest-coverage.md` during a full review — this\n   section audits test _quality_, not existence.\n5. **Tooling Recommendations** — Vitest \u002F runner (happy-dom vs Browser Mode) \u002F library\n   (`@vue\u002Ftest-utils` vs `@testing-library\u002Fvue`) \u002F Playwright-vs-Cypress choices, each with a\n   one-line rationale.\n6. **Handoffs** — explicit next-skill pointers when applicable (execute → `mk:testing`,\n   E2E gen → `mk:qa-manual`, coverage map → `mk:nyquist`).\n\n### Worked example — design request\n\n> \"How should I test this Pinia-backed `UserProfile` component?\"\n\n```\nVerdict: NEEDS-WORK — no Pinia provided, so the component will throw on mount.\nTooling: Vitest + happy-dom; @vue\u002Ftest-utils + createTestingPinia({ createSpy: vi.fn }).\nMissing Scenarios: loading state, fetch error, empty profile.\nHandoffs: write + run the suite → mk:testing.\n```\n\n### Worked example — review request\n\n> \"Review `tests\u002FSearchBar.spec.ts`.\"\n\n```\nVerdict: NEEDS-WORK — assertions race ahead of async DOM updates.\nTest Smells:\n  [high] · SearchBar.spec.ts:21 · setValue not awaited · `await wrapper.find('input').setValue(...)`\n  [medium] · SearchBar.spec.ts:30 · brittle `.btn-primary` locator · query by role\u002Ftext or data-testid\nMissing Scenarios: empty-query, no-results, API error.\n```\n\n## Gotchas\n\n- **Missing `await flushPromises()` after an API call** — `await nextTick()` only flushes\n  reactive DOM updates, not pending promises; an API-driven assertion runs against stale state\n  and the test flakes. Use `flushPromises()` (sometimes twice for chained async).\n- **Snapshot-only tests pass while behavior breaks** — a snapshot asserts markup shape, not\n  behavior; pair every snapshot with behavioral assertions (text\u002Frole\u002Femitted), or it gives\n  false confidence.\n- **\"injection Symbol(pinia) not found\"** — mounting a store-backed component without\n  `createTestingPinia` (component tests) or `setActivePinia(createPinia())` (store unit tests)\n  throws on mount. Provide Pinia before asserting.\n- **Teleported content isn't in the wrapper** — `\u003CTeleport>` moves DOM out of the component\n  subtree, so `wrapper.find()` misses it; stub Teleport or `attachTo: document.body` and query\n  the document.\n\n## Reference\n\n- [Vue.js Testing Guide](https:\u002F\u002Fvuejs.org\u002Fguide\u002Fscaling-up\u002Ftesting)\n- [Vue Test Utils](https:\u002F\u002Ftest-utils.vuejs.org\u002F)\n- [Vitest Documentation](https:\u002F\u002Fvitest.dev\u002F)\n- [Playwright Documentation](https:\u002F\u002Fplaywright.dev\u002F)\n\n## Provenance\n\nPorted and extended from an upstream Vue testing skill — see [SYNC.md](SYNC.md) for the\nupstream path, pinned commit, and which references are vendored-verbatim vs toolkit.",{"name":5,"description":7},"main","0b5569142101a45a6dc48d1b01bfae8801383fb7","packages\u002Fmewkit\u002Fsrc\u002Fmigrate\u002Fmodules\u002Fcodex\u002Froot\u002F.agents\u002Fskills\u002Fmk-vue-testing-best-practices",3,"https:\u002F\u002Fgithub.com\u002Fngocsangyem\u002FMeowKit","https:\u002F\u002Fdocs.meowkit.dev\u002F","https:\u002F\u002Fgithub.com\u002Fngocsangyem","Keep moving forward","2026-11-14 02:11:10",{"source":8,"skillName":5,"commands":64,"prompt":74,"zipAvailable":75},[65,68,71],{"tool":66,"command":67},"npx","npx skills add ngocsangyem\u002FMeowKit --skill mk-vue-testing-best-practices",{"tool":69,"command":70},"bunx","bunx skills add ngocsangyem\u002FMeowKit --skill mk-vue-testing-best-practices",{"tool":72,"command":73},"pnpm","pnpm dlx skills add ngocsangyem\u002FMeowKit --skill mk-vue-testing-best-practices","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fngocsangyem\u002FMeowKit\u002Fblob\u002Fmain\u002Fpackages\u002Fmewkit\u002Fsrc\u002Fmigrate\u002Fmodules\u002Fcodex\u002Froot\u002F.agents\u002Fskills\u002Fmk-vue-testing-best-practices\u002FSKILL.md",true,[77,83,87,91,95,99,103,107,111,115,119,123,127,131,135,139],{"path":78,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":81,"sourceHtmlUrl":82},"reference\u002Faccessibility-testing.md","REFERENCE","参考文档",1965,"https:\u002F\u002Fgithub.com\u002Fngocsangyem\u002FMeowKit\u002Fblob\u002Fmain\u002Fpackages\u002Fmewkit\u002Fsrc\u002Fmigrate\u002Fmodules\u002Fcodex\u002Froot\u002F.agents\u002Fskills\u002Fmk-vue-testing-best-practices\u002Freference\u002Faccessibility-testing.md",{"path":84,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":85,"sourceHtmlUrl":86},"reference\u002Fasync-component-testing.md",4896,"https:\u002F\u002Fgithub.com\u002Fngocsangyem\u002FMeowKit\u002Fblob\u002Fmain\u002Fpackages\u002Fmewkit\u002Fsrc\u002Fmigrate\u002Fmodules\u002Fcodex\u002Froot\u002F.agents\u002Fskills\u002Fmk-vue-testing-best-practices\u002Freference\u002Fasync-component-testing.md",{"path":88,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":89,"sourceHtmlUrl":90},"reference\u002Fform-testing.md",3591,"https:\u002F\u002Fgithub.com\u002Fngocsangyem\u002FMeowKit\u002Fblob\u002Fmain\u002Fpackages\u002Fmewkit\u002Fsrc\u002Fmigrate\u002Fmodules\u002Fcodex\u002Froot\u002F.agents\u002Fskills\u002Fmk-vue-testing-best-practices\u002Freference\u002Fform-testing.md",{"path":92,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":93,"sourceHtmlUrl":94},"reference\u002Fteleport-testing-complexity.md",4136,"https:\u002F\u002Fgithub.com\u002Fngocsangyem\u002FMeowKit\u002Fblob\u002Fmain\u002Fpackages\u002Fmewkit\u002Fsrc\u002Fmigrate\u002Fmodules\u002Fcodex\u002Froot\u002F.agents\u002Fskills\u002Fmk-vue-testing-best-practices\u002Freference\u002Fteleport-testing-complexity.md",{"path":96,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":97,"sourceHtmlUrl":98},"reference\u002Ftest-smells-rubric.md",3914,"https:\u002F\u002Fgithub.com\u002Fngocsangyem\u002FMeowKit\u002Fblob\u002Fmain\u002Fpackages\u002Fmewkit\u002Fsrc\u002Fmigrate\u002Fmodules\u002Fcodex\u002Froot\u002F.agents\u002Fskills\u002Fmk-vue-testing-best-practices\u002Freference\u002Ftest-smells-rubric.md",{"path":100,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":101,"sourceHtmlUrl":102},"reference\u002Ftesting-async-await-flushpromises.md",5254,"https:\u002F\u002Fgithub.com\u002Fngocsangyem\u002FMeowKit\u002Fblob\u002Fmain\u002Fpackages\u002Fmewkit\u002Fsrc\u002Fmigrate\u002Fmodules\u002Fcodex\u002Froot\u002F.agents\u002Fskills\u002Fmk-vue-testing-best-practices\u002Freference\u002Ftesting-async-await-flushpromises.md",{"path":104,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":105,"sourceHtmlUrl":106},"reference\u002Ftesting-browser-vs-node-runners.md",5623,"https:\u002F\u002Fgithub.com\u002Fngocsangyem\u002FMeowKit\u002Fblob\u002Fmain\u002Fpackages\u002Fmewkit\u002Fsrc\u002Fmigrate\u002Fmodules\u002Fcodex\u002Froot\u002F.agents\u002Fskills\u002Fmk-vue-testing-best-practices\u002Freference\u002Ftesting-browser-vs-node-runners.md",{"path":108,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":109,"sourceHtmlUrl":110},"reference\u002Ftesting-component-blackbox-approach.md",4753,"https:\u002F\u002Fgithub.com\u002Fngocsangyem\u002FMeowKit\u002Fblob\u002Fmain\u002Fpackages\u002Fmewkit\u002Fsrc\u002Fmigrate\u002Fmodules\u002Fcodex\u002Froot\u002F.agents\u002Fskills\u002Fmk-vue-testing-best-practices\u002Freference\u002Ftesting-component-blackbox-approach.md",{"path":112,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":113,"sourceHtmlUrl":114},"reference\u002Ftesting-composables-helper-wrapper.md",6119,"https:\u002F\u002Fgithub.com\u002Fngocsangyem\u002FMeowKit\u002Fblob\u002Fmain\u002Fpackages\u002Fmewkit\u002Fsrc\u002Fmigrate\u002Fmodules\u002Fcodex\u002Froot\u002F.agents\u002Fskills\u002Fmk-vue-testing-best-practices\u002Freference\u002Ftesting-composables-helper-wrapper.md",{"path":116,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":117,"sourceHtmlUrl":118},"reference\u002Ftesting-e2e-playwright-recommended.md",6581,"https:\u002F\u002Fgithub.com\u002Fngocsangyem\u002FMeowKit\u002Fblob\u002Fmain\u002Fpackages\u002Fmewkit\u002Fsrc\u002Fmigrate\u002Fmodules\u002Fcodex\u002Froot\u002F.agents\u002Fskills\u002Fmk-vue-testing-best-practices\u002Freference\u002Ftesting-e2e-playwright-recommended.md",{"path":120,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":121,"sourceHtmlUrl":122},"reference\u002Ftesting-no-snapshot-only.md",6283,"https:\u002F\u002Fgithub.com\u002Fngocsangyem\u002FMeowKit\u002Fblob\u002Fmain\u002Fpackages\u002Fmewkit\u002Fsrc\u002Fmigrate\u002Fmodules\u002Fcodex\u002Froot\u002F.agents\u002Fskills\u002Fmk-vue-testing-best-practices\u002Freference\u002Ftesting-no-snapshot-only.md",{"path":124,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":125,"sourceHtmlUrl":126},"reference\u002Ftesting-pinia-store-setup.md",6249,"https:\u002F\u002Fgithub.com\u002Fngocsangyem\u002FMeowKit\u002Fblob\u002Fmain\u002Fpackages\u002Fmewkit\u002Fsrc\u002Fmigrate\u002Fmodules\u002Fcodex\u002Froot\u002F.agents\u002Fskills\u002Fmk-vue-testing-best-practices\u002Freference\u002Ftesting-pinia-store-setup.md",{"path":128,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":129,"sourceHtmlUrl":130},"reference\u002Ftesting-suspense-async-components.md",6448,"https:\u002F\u002Fgithub.com\u002Fngocsangyem\u002FMeowKit\u002Fblob\u002Fmain\u002Fpackages\u002Fmewkit\u002Fsrc\u002Fmigrate\u002Fmodules\u002Fcodex\u002Froot\u002F.agents\u002Fskills\u002Fmk-vue-testing-best-practices\u002Freference\u002Ftesting-suspense-async-components.md",{"path":132,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":133,"sourceHtmlUrl":134},"reference\u002Ftesting-vitest-recommended-for-vue.md",5039,"https:\u002F\u002Fgithub.com\u002Fngocsangyem\u002FMeowKit\u002Fblob\u002Fmain\u002Fpackages\u002Fmewkit\u002Fsrc\u002Fmigrate\u002Fmodules\u002Fcodex\u002Froot\u002F.agents\u002Fskills\u002Fmk-vue-testing-best-practices\u002Freference\u002Ftesting-vitest-recommended-for-vue.md",{"path":136,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":137,"sourceHtmlUrl":138},"reference\u002Fvue-router-testing.md",4065,"https:\u002F\u002Fgithub.com\u002Fngocsangyem\u002FMeowKit\u002Fblob\u002Fmain\u002Fpackages\u002Fmewkit\u002Fsrc\u002Fmigrate\u002Fmodules\u002Fcodex\u002Froot\u002F.agents\u002Fskills\u002Fmk-vue-testing-best-practices\u002Freference\u002Fvue-router-testing.md",{"path":140,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":141,"sourceHtmlUrl":142},"SYNC.md",3383,"https:\u002F\u002Fgithub.com\u002Fngocsangyem\u002FMeowKit\u002Fblob\u002Fmain\u002Fpackages\u002Fmewkit\u002Fsrc\u002Fmigrate\u002Fmodules\u002Fcodex\u002Froot\u002F.agents\u002Fskills\u002Fmk-vue-testing-best-practices\u002FSYNC.md",[144,162,178,184,196,221],{"skillNo":145,"name":146,"nameZh":6,"description":147,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":148,"categories":149,"keywords":150,"publishedAt":49},"01M6J4NFDY0KY3XXJ6E5WBASAF","mk-sequential-thinking","Structured step-by-step reasoning before acting, to avoid guessing. For complex debugging, multi-step analysis, hypothesis checks. NOT for being stuck on approach (mk:problem-solving).","https:\u002F\u002Fgithub.com\u002Fngocsangyem\u002FMeowKit\u002Fblob\u002Fmain\u002Fpackages\u002Fmewkit\u002Fsrc\u002Fmigrate\u002Fmodules\u002Fcodex\u002Froot\u002F.agents\u002Fskills\u002Fmk-sequential-thinking\u002FSKILL.md",[],[151,152,153,154,155,156,157,158,159,36,160,161],"mk sequential thinking","sequential thinking","thinking","structured","problem","problem-solving","analysis","hypothesis","reasoning","debugging","multi",{"skillNo":163,"name":164,"nameZh":6,"description":165,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":166,"categories":167,"keywords":171,"publishedAt":49},"01M6J5D3G7C0V3BZ97Y61WB172","mk:fixture-valid","A valid fixture used to verify the skill structure validator.","https:\u002F\u002Fgithub.com\u002Fngocsangyem\u002FMeowKit\u002Fblob\u002Fmain\u002Ftests\u002Ffixtures\u002Fskill-creator\u002Fvalid\u002FSKILL.md",[168],{"categoryNo":169,"categoryName":170,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[172,173,174,175,176,177],"mk:fixture valid","fixture","valid","verify","structure","validator",{"skillNo":179,"name":180,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":181,"categories":182,"keywords":183,"publishedAt":49},"01M6J5CZRVSN8T4BZM0Y42CXJY","invalid","https:\u002F\u002Fgithub.com\u002Fngocsangyem\u002FMeowKit\u002Fblob\u002Fmain\u002Ftests\u002Ffixtures\u002Fskill-creator\u002Finvalid\u002FSKILL.md",[],[180],{"skillNo":185,"name":186,"nameZh":6,"description":187,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":188,"categories":189,"keywords":191,"publishedAt":49},"01M6J5CVN0N8KP9JFAWCV2PC2T","mk:sample-skill","Sample skill for fixture purposes — small enough to land below noise floor.","https:\u002F\u002Fgithub.com\u002Fngocsangyem\u002FMeowKit\u002Fblob\u002Fmain\u002Fpackages\u002Fmewkit\u002Ftests\u002Ffixtures\u002Fcontext-audit\u002F.claude\u002Fskills\u002Fsample-skill\u002FSKILL.md",[190],{"categoryNo":169,"categoryName":170,"taxonomyType":21,"taxonomyTypeDesc":22},[192,193,194,195,173,36],"mk:sample skill","sample","sample skill","land",{"skillNo":197,"name":198,"nameZh":6,"description":199,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":200,"categories":201,"keywords":203,"publishedAt":49},"01M6J5CP99X9S0B7XCSBX6H5P2","mk-worktree","Manages git worktrees for parallel agent isolation: creates parallel\u002F{name}-{timestamp} branches, merges with conflict detection. NOT for user feature branches (use git worktree directly).","https:\u002F\u002Fgithub.com\u002Fngocsangyem\u002FMeowKit\u002Fblob\u002Fmain\u002Fpackages\u002Fmewkit\u002Fsrc\u002Fmigrate\u002Fmodules\u002Fcursor\u002Froot\u002F.cursor\u002Fskills\u002Fmk-worktree\u002FSKILL.md",[202],{"categoryNo":169,"categoryName":170,"taxonomyType":21,"taxonomyTypeDesc":22},[204,205,206,207,208,209,210,211,212,213,214,215,36,216,217,218,219,220],"mk worktree","worktree","user","git worktrees","use","worktrees","branches","conflict","feature","isolation","name","with","parallel","timestamp","git","detection","git worktree",{"skillNo":222,"name":223,"nameZh":6,"description":224,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":225,"categories":226,"keywords":228,"publishedAt":49},"01M6J5CJT8ZGXH9YYJ7GV3R2B4","mk-workflow-orchestrator","Auto-invoked 7-phase workflow for complex-feature intent; fasttrack mode for pre-approved specs. NOT for explicit single tasks (mk:cook), green-field builds (mk:autobuild), or simple fixes (mk:fix).","https:\u002F\u002Fgithub.com\u002Fngocsangyem\u002FMeowKit\u002Fblob\u002Fmain\u002Fpackages\u002Fmewkit\u002Fsrc\u002Fmigrate\u002Fmodules\u002Fcursor\u002Froot\u002F.cursor\u002Fskills\u002Fmk-workflow-orchestrator\u002FSKILL.md",[227],{"categoryNo":169,"categoryName":170,"taxonomyType":21,"taxonomyTypeDesc":22},[229,230,231,232,233,234,235,236,237,238,239,212,240,241,36,242,243,244,245,246,247,248],"mk workflow orchestrator","workflow orchestrator","orchestrator","workflow","green-field","tasks","fix","auto","simple","intent","green","autobuild","mode","fixes","mk:autobuild","mk:cook","mk:fix","fasttrack","complex-feature","phase"]