关于 vue-testing-best-practices
面向 Vue 项目开发者的测试实践技能，整理测试环境、组件与 composable 测试、异步行为及浏览器与 Node 测试运行器方面的建议，并涵盖常见故障。
主要功能
- 01Vue 测试基础设施指南
- 02组件黑盒测试模式
- 03异步与生命周期测试建议
- 04Pinia 与 Suspense 测试配置
- 05浏览器和 Node 运行器考量
适用场景
- 01为 Vue 3 选择测试配置
- 02排查不稳定的异步测试
- 03测试使用生命周期钩子的 composable
- 04测试 Teleport 或异步组件
安装
复制下面的命令，在终端中运行。
$
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