SuperAPI AI 工具集

generate-snapshot-tests

测试与质量

查看项目

更新于 10-16 08:47

技能介绍

用途:为 Sentry 前端 React 组件生成同目录的 *.snapshots.tsx 快照测试文件,遵循核心设计系统组件的既定写法。

主要能力与流程:

  1. 定位组件:若提供参数则视作路径或组件名,否则询问;在 static/app/components/core/<name>/、static/app/components/ 等路径查找,可用 Glob 或 Grep。读取源码以识别组件名、导出的 Props 类型、联合类型与枚举式字符串字面量(如 variant、priority、size)、布尔开关(如 disabled、checked、busy)以及是否需要事件处理器。
  2. 确定导入路径:属于 @sentry/scraps 的用 import {ComponentName, type ComponentNameProps} from '@sentry/scraps/<name>';属于 core 但未发布到 scraps 的,用直接路径并加 // eslint-disable-next-line @sentry/scraps/no-core-import 注释;其它组件用 sentry/components/<path>。
  3. 选择要快照的属性:字符串字面量联合类型用 it.snapshot.each 逐一快照;有视觉影响的布尔开关快照 true/false;无视觉价值的布尔跳过;children、className、style、事件处理器跳过。交互组件须包含 disabled/checked 状态。
  4. 编写文件:命名为 <component-name>.snapshots.tsx。始终包含 ThemeProvider、组件导入、以及加 // eslint-disable-next-line no-restricted-imports 注释的 darkTheme/lightTheme 导入,并定义 const themes = {light: lightTheme, dark: darkTheme}。用 describe.each(['light','dark'] as const) 包裹主题循环;变体用 it.snapshot.each(第三个参数为元数据函数,须包含所有变化属性),单例状态用 it.snapshot(可传元数据)。容器默认 <div style={{padding: 8}}>,宽度敏感组件加 width: 400。交互组件传入空处理函数,如 onChange={() => {}}。快照顺序按影响从大到小:主变体、次要变体、尺寸、状态组合、布尔修饰、边界情况。

适用场景:Sentry 前端 React 组件(尤其是核心设计系统组件)的快照测试生成与补齐。

限制:需遵守 @sentry/scraps 与 core 导入及 ESLint 抑制规则;不要快照实现细节属性;不要漏传元数据参数。具体的运行命令、快照生成或更新命令、依赖与版本在资料中暂未提供。