用途:为 UI 组件和数据结构创建、更新与维护快照测试,通过序列化输出(HTML、JSON、组件树)检测渲染结果的非预期变化,主要用于 UI 回归测试。
主要能力:支持 Jest、Vitest 内置快照,以及 Python 的 pytest-snapshot/syrupy;可为组件渲染结果生成快照,组织快照文件的命名与目录,更新和清理过期快照,并可在 CI 中对快照不匹配进行拦截。
使用方式:用 toMatchSnapshot() 或 toMatchInlineSnapshot() 编写断言,小输出建议用内联快照;快照文件按组件分组存放于 snapshots/ 目录并与测试文件同级。有意的变更经确认后用 jest --updateSnapshot 或 vitest --update 更新,PR 中需逐行审查快照差异。CI 使用 --ci 标志使缺失快照视为失败,并将差异作为制品上传。动态内容可通过自定义序列化器过滤。
适用场景:复杂渲染输出的 UI 组件(导航栏、表单、卡片)、API 响应转换后的结构化 JSON、配置生成器输出的 YAML/TOML。
限制与注意:不适合高度动态内容(时间戳、随机 ID);共享样式或上下文导致的无关差异需通过包装提供者和 mock 全局样式隔离;快照文件过大时应缩小范围;本地与 CI 差异可通过固定 Node.js 版本缓解;非确定性快照需 mock Date.now() 与 Math.random()。相关资源包括 Jest、Vitest、React Testing Library 与 Syrupy 官方文档。