关于 vue-testing-best-practices
面向 Vue.js 应用测试的实践参考,涵盖测试配置选择与常见问题,适用于测试组件、composable 和端到端流程的 Vue 开发者。
主要功能
- 01Vue 3 测试配置建议
- 02组件黑盒测试
- 03异步与生命周期测试模式
- 04Pinia 与 Suspense 配置
- 05浏览器与 Node 运行器选择
适用场景
- 01选择 Vue 测试基础设施
- 02测试使用注入机制的 composable
- 03排查不稳定的异步测试
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ antfu/ skills --skill vue-testing-best-practices安装后在 Claude Code 中输入/vue-testing-best-practices确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
LICENSE.mdSYNC.mdreference/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