技能 vue-testing-best-practices
📦

vue-testing-best-practices

v1.0.0 内容修订 r2 安全 ⚡ 包含脚本⚙️ 外部命令🌐 网络访问🔑 环境变量

提升 Vue 测试质量

Vue 测试常因异步时序、脆弱的内部实现依赖和薄弱的快照测试而失败。此技能引导 Claude、Codex 和 Claude Code 采用可靠的 Vitest、Vue Test Utils 和 Playwright 模式。

支持: Claude Codex Code(CC)
🥈 80 白银

使用我的智能体安装

将此请求复制给你的智能体，其中包含权威 Skill 页面和清单。

智能体请求
Review the Skillstore skill "vue-testing-best-practices" from https://skillstore.io/skills/antfu-vue-testing-best-practices.md and its manifest at https://skillstore.io/api/skills/antfu-vue-testing-best-practices/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

你的智能体仍应展示其计划，并按安全策略请求必要确认。

Agent 可读资源

当 AI Agent、爬虫或脚本需要干净上下文，而不是读取完整页面时，请使用这些链接。

Markdown 详情 GET /skills/antfu-vue-testing-best-practices.md 已签名 manifest GET /api/skills/antfu-vue-testing-best-practices/manifest 已签名 lockfile GET /api/skills/antfu-vue-testing-best-practices/lockfile

测试它

正在使用“vue-testing-best-practices”。 一个团队询问为什么异步组件测试会在内容出现之前就进行断言。

预期结果:

  • 解释异步 Vue 组件会在初始挂载后解析。
  • 建议在最终断言前等待待处理的 promise。
  • 建议分别覆盖加载、成功和错误状态。

正在使用“vue-testing-best-practices”。 审查者发现测试直接读取组件私有状态。

预期结果:

  • 将这些测试识别为与实现耦合且脆弱。
  • 推荐面向用户的查询、触发事件检查和可见输出断言。
  • 仅为没有语义含义的元素保留 data-testid 指导。

正在使用“vue-testing-best-practices”。 一个项目需要 Vue 应用的 E2E 指导。

预期结果:

  • 推荐使用 Playwright 实现跨浏览器覆盖和本地服务器集成。
  • 建议稳定的 locator 模式和适配 CI 的重试设置。
  • 将 E2E 流程与组件级 Vitest 覆盖区分开。

安全审计

安全
v5 • 2026/7/23 打开版本化报告

All 42 static detections are false positives caused by Markdown examples, ordinary test configuration, localhost URLs, and official documentation links. The examples do not execute shell commands, read environment files, expose secrets, or contact untrusted services. No prompt injection or other semantic security concern was found.

14
已扫描文件
2,255
分析行数
0
复核项
0
已忽略误报

风险因素

⚡ 包含脚本 (5)
reference/async-component-testing.md:28 reference/async-component-testing.md:46 reference/async-component-testing.md:60 reference/async-component-testing.md:85 reference/async-component-testing.md:142
⚙️ 外部命令 (4)
reference/async-component-testing.md:98-110 reference/testing-no-snapshot-only.md:109-111 reference/testing-suspense-async-components.md:57-72 reference/testing-suspense-async-components.md:203-213
🌐 网络访问 (6)
reference/testing-e2e-playwright-recommended.md:50 reference/testing-e2e-playwright-recommended.md:80 SKILL.md:26 SKILL.md:27 SKILL.md:28 SKILL.md:29
🔑 环境变量 (10)
reference/testing-e2e-playwright-recommended.md:43 reference/testing-e2e-playwright-recommended.md:44 reference/testing-e2e-playwright-recommended.md:45 reference/testing-e2e-playwright-recommended.md:81 reference/testing-e2e-playwright-recommended.md:43 reference/testing-e2e-playwright-recommended.md:44 reference/testing-e2e-playwright-recommended.md:45 reference/testing-e2e-playwright-recommended.md:81 reference/testing-vitest-recommended-for-vue.md:160 reference/testing-vitest-recommended-for-vue.md:160
最新一次完成的静态与语义审计未检测到已确认的安全发现。这并不能证明该 Skill 没有副作用。
审计者: codex 查看审计历史 →
分享与引用此报告

分享版本化评估报告、中性徽章、嵌入卡片和引用。Skillstore 只报告证据，不判断该 Skill 是否安全。

打开版本化报告
安全评估

复制报告链接

https://skillstore.io/skills/antfu-vue-testing-best-practices/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown 徽章

[![Skillstore security assessment](https://skillstore.io/badges/skills/antfu-vue-testing-best-practices/security.svg)](https://skillstore.io/skills/antfu-vue-testing-best-practices?utm_source=security_passport_badge)

HTML 徽章

<a href="https://skillstore.io/skills/antfu-vue-testing-best-practices?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/antfu-vue-testing-best-practices/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

嵌入卡片

<iframe src="https://skillstore.io/embed/skills/antfu-vue-testing-best-practices.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>
学术引用 (APA · BibTeX · CFF)

APA 引用

github.com/vuejs-ai. (2026). vue-testing-best-practices security audit report (audit version 5) [Author version 1.0.0]. Skillstore. https://skillstore.io/skills/antfu-vue-testing-best-practices/audits/5

BibTeX 引用

@techreport{github-com-vuejs-ai-antfu-vue-testing-best-practices-2026, author = {github.com/vuejs-ai}, title = {vue-testing-best-practices security audit report (audit version 5)}, institution = {Skillstore}, year = {2026}, number = {5}, url = {https://skillstore.io/skills/antfu-vue-testing-best-practices/audits/5}, note = {Author version 1.0.0} }

CITATION.cff

cff-version: 1.2.0 message: "If you use this Skill, cite its author and this versioned security audit report." title: "vue-testing-best-practices security audit report (audit version 5)" version: "1.0.0" type: report authors: - name: "github.com/vuejs-ai" date-released: "2026-07-23" url: "https://skillstore.io/skills/antfu-vue-testing-best-practices/audits/5" identifiers: - type: other value: "skillstore:antfu-vue-testing-best-practices:audit:5" description: "Skillstore immutable audit report identifier"

比较变体

2 个可安装变体

每位作者的技能都保持为独立的可安装项。推荐变体按 Skillstore 证据排序。

为什么此变体排名第一

Skillstore 使用量更高
github.com/vuejs-ai 推荐 当前

antfu-vue-testing-best-practices

Skillstore 评分 80
证据置信度 高
Skillstore 使用量 23
已更新

2026-09-09

github.com/vuejs-ai

vuejs-ai-vue-testing-best-practices

Skillstore 评分 80
证据置信度 高
Skillstore 使用量 21
已更新

2026-09-09

Skillstore 评分

评分依据 证据置信度: 高
55
架构
100
可维护性
87
内容
70
社区
83
规范符合性

你能构建什么

设置 Vue 测试

为新的 Vue 3 应用创建实用的 Vitest 和 Vue Test Utils 基线。

稳定不稳定测试

诊断异步组件、Suspense、flushPromises 和 DOM 更新相关的时序问题。

改进测试设计

用以行为为中心的覆盖替代脆弱的实现测试和仅快照检查。

试试这些提示

设置基础测试 
使用此技能为我的 Vue 3 项目设置 Vitest 和 Vue Test Utils。推荐测试环境选择和基础配置。
修复异步失败 
使用此技能审查我失败的异步 Vue 组件测试。解释哪里需要 flushPromises、nextTick 或 Suspense 包装器。
审查测试质量 
使用此技能审查我的 Vue 组件测试，检查脆弱的内部实现依赖、仅快照断言、薄弱选择器以及缺失的用户行为覆盖。
设计完整策略 
使用此技能设计覆盖 Vitest、组合式函数、Pinia、异步组件、Teleport 和 Playwright E2E 测试的 Vue 测试策略。

最佳实践

  • 优先使用以行为为中心的断言，而不是直接访问组件内部实现。
  • 在最终断言前等待 Vue 更新、promise 和用户交互。
  • 使用 Playwright 覆盖关键的跨浏览器用户流程，并使用 Vitest 获得组件反馈。

避免

  • 不要依赖仅快照测试来验证组件正确性。
  • 当可见行为可以证明相同结果时，不要测试私有方法。
  • 测试 Suspense 或 defineAsyncComponent 用法时，不要忽略异步时序。

常见问题

此技能面向哪些 Vue 版本？
它面向使用 Vitest、Vue Test Utils、Pinia 和 Playwright 的 Vue 3 测试模式。
它可以为我的项目编写测试吗？
当你的项目文件可用时，它可以指导代理编写或修改测试。
它会取代 Vitest 文档吗？
不能。它提供实用的 Vue 专注模式，并将概念关联到常见测试问题。
它涵盖 E2E 测试吗？
会。它推荐 Playwright 设置、本地开发服务器使用、浏览器项目和稳定的 locator。
它能帮助处理不稳定的异步测试吗？
可以。它解释 flushPromises、nextTick、Suspense 包装器以及异步断言时序。
它涵盖安全测试吗？
不能。它专注于 Vue 应用测试质量，而不是专门的安全评估。

开发者详情

许可证

MIT

作者版本

v1.0.0

Skillstore 修订

r2

仓库

https://github.com/antfu/skills/tree/main/skills/vue-testing-best-practices/

引用

89edfdc710d0846129dcee6a929477b04f08052c

维护新鲜度

2026/7/24

使用量

8 次下载 · 224 次浏览

文件结构

📄 LICENSE.md

📁 reference/

📄 async-component-testing.md

📄 teleport-testing-complexity.md

📄 testing-async-await-flushpromises.md

📄 testing-browser-vs-node-runners.md

📄 testing-component-blackbox-approach.md

📄 testing-composables-helper-wrapper.md

📄 testing-e2e-playwright-recommended.md

📄 testing-no-snapshot-only.md

📄 testing-pinia-store-setup.md

📄 testing-suspense-async-components.md

📄 testing-vitest-recommended-for-vue.md

📄 SKILL.md

📄 SYNC.md