关于 vue-testing-best-practices
介绍 Vue.js 测试实践、模式和常见问题的技能，指导开发者配置测试、测试组件与 composable、处理异步行为并开展端到端测试。
主要功能
- 01Vue 3 测试配置建议
- 02组件与 composable 测试模式
- 03异步测试与竞态处理
- 04选择浏览器或 Node 测试运行器
- 05端到端测试框架建议
适用场景
- 01选择 Vue 3 测试配置
- 02测试使用生命周期钩子的 composable
- 03排查异步测试不稳定问题
- 04测试 DOM 事件和计算样式
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/vue-testing-best-practices确认已加载。
包含的文件
除 SKILL.md 外，安装时一起下载的参考资料和脚本。
reference/async-component-testing.mdteleport-testing-complexity.mdtesting-async-await-flushpromises.mdtesting-browser-vs-node-runners.mdtesting-component-blackbox-approach.mdtesting-composables-helper-wrapper.mdtesting-e2e-playwright-recommended.mdtesting-no-snapshot-only.mdtesting-pinia-store-setup.mdtesting-suspense-async-components.mdtesting-vitest-recommended-for-vue.md详细介绍
Vue.js 测试最佳实践、模式和常见陷阱。
测试
- 为 Vue 3 项目搭建测试基础设施 → 参见 testing-vitest-recommended-for-vue
- 重构组件内部实现时，测试总是失效 → 参见 testing-component-blackbox-approach
- 测试因竞态条件而间歇性失败 → 参见 testing-async-await-flushpromises
- 使用生命周期钩子或 inject 的组合式函数难以测试 → 参见 testing-composables-helper-wrapper
- 测试中出现 “injection Symbol(pinia) not found” 错误 → 参见 testing-pinia-store-setup
- 使用异步 setup 的组件无法在测试中渲染 → 参见 testing-suspense-async-components
- 即使功能已损坏，快照测试仍然通过 → 参见 testing-no-snapshot-only
- 为 Vue 应用选择端到端测试框架 → 参见 testing-e2e-playwright-recommended
- 测试需要验证计算后的样式或真实 DOM 事件 → 参见 testing-browser-vs-node-runners
- 测试使用 defineAsyncComponent 创建的组件时失败 → 参见 async-component-testing
- 无法通过 wrapper 查询找到 Teleport 渲染的模态框内容 → 参见 teleport-testing-complexity
参考
评论
支持 Markdown