关于 vue-testing-best-practices
面向 Vue.js 项目的测试实践技能,汇总测试基础设施、组件、异步逻辑及端到端测试的常见问题与指引。
主要功能
- 01Vue 3 测试基础设施建议
- 02组件黑盒测试方法
- 03异步与组合式函数测试
- 04端到端及浏览器测试选择
适用场景
- 01搭建 Vue 3 测试环境
- 02排查异步测试的竞态问题
- 03为 Vue 应用选择端到端测试方案
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ onmax/ nuxt-skills --skill vue-testing-best-practices安装后在 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
- 测试中出现“找不到注入的 Symbol(pinia)”错误 → 参见 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
- 无法通过包装器查询找到 Teleport 传送的模态框内容 → 参见 teleport-testing-complexity
参考资料
评论
支持 Markdown