testing-frontend

testing-frontend 技能是一个专为前端开发人员设计的专业工具组，专注于编写稳健且以用户为中心的测试。它简化了现代 Web 应用程式的单元测试与整合测试之建立及维护，确保复杂 UI 组件的高可靠性。通过强制执行行为测试理念，它帮助开发人员专注于用户如何与应用程式互动，而不是脆弱的内部实现细节。

• 提供对 Vitest、React Testing Library 和 Vue Test Utils 等测试框架的专家级支持。

• 实现以用户为中心的测试模式，优先使用 getByRole 和 getByLabelText 等基于可访问性的查询，确保代码既具备可测试性又具备可访问性。

• 为 React 和 Vue 组件中的 API 模拟响应与处理异步操作提供标准化模式。

• 简化表单测试工作流程，包含使用 user-event 进行用户互动模拟、表单提交验证及状态变更断言。

• 支持复杂测试场景，例如 React Query 的 QueryClientProvider 包装器、Vue 的 Pinia 状态管理以及处理复杂的加载或错误状态。

• 强制执行最佳实践以避免依赖实现的测试，从而在重构 UI 代码时减少维护成本。

• 目标用户包括构建互动式网页界面的前端工程师、软件架构师及 QA 开发人员。

• 当您在实现新 UI 功能、重构组件或编写前端逻辑的端到端整合测试时，请使用此技能。

• 输入通常涉及组件代码、互动需求或 API 定义；输出结果为干净、可维护且遵循行业标准测试方法论的测试文件。

• 实际限制包含必须遵守所提供的查询优先级层级，确保测试随着组件树演进时仍具备可维护性。

• 请务必优先使用语义化查询而非 test-id，以模拟真实浏览器使用模式并提升应用程式的可访问性覆盖率。