SuperAPI AI 工具集

shadcn/ui Component Testing

测试与质量

查看项目

更新于 10-16 03:47

技能介绍

用途:这是一个测试技能,帮助为 shadcn/ui 和 Radix UI 组件库编写、审查与调试测试,涉及 Dialog、Popover、Form、DataTable、Command 调色板与主题切换等组件的测试。

主要能力与原则:

  • 测试用户交互而非 Radix 内部实现,聚焦自身组合与定制逻辑。
  • 使用无障碍查询,优先 getByRole、getByLabelText、getByText,而非 CSS 选择器,以保证 ARIA 合规。
  • 测试键盘导航,验证 tab 顺序、方向键与 Escape。
  • 验证 portal 渲染,Dialog、Popover、Dropdown 渲染在 portal 中,应使用 screen 查询而非 container 查询。
  • 表单测试涉及 react-hook-form + zod,验证校验消息与提交行为。
  • 显式断言视觉状态,如打开/关闭、禁用、加载与错误状态。
  • 测试主题切换,验证组件在明暗模式下渲染正确。

使用方式:示例给出基于 vitest 与 @testing-library/react 的测试结构,目录包含 src/components/ui 与 tests、test-utils,以及 vitest.config.ts、playwright.config.ts 等配置文件。test-utils 提供 renderWithProviders(基于 next-themes 的 ThemeProvider 并挂载 Toaster)与 accessibility-helpers(基于 jest-axe 的 expectNoA11yViolations,以及 expectFocusVisible、expectAriaExpanded、expectAriaSelected)。Dialog 示例覆盖打开/关闭、Escape、点击遮罩、回调、焦点陷阱与 ARIA 属性;DropdownMenu 示例覆盖方向键导航与 Enter 选择;Select 示例覆盖占位符、禁用项、选中值与键盘操作。

适用场景:为使用 shadcn/ui 与 Radix UI 的项目编写组件测试、做无障碍审计与交互回归。

限制:资料聚焦测试方法论与示例,未提供版本要求、依赖安装命令、运行命令或收费与平台信息;资料末尾表单测试部分被截断,相关内容暂未提供。