快照测试序列化组件渲染结构而非截图，仅捕获DOM结构变化，对CSS、交互、响应式等视觉差异无感，适合检测意外结构退化，需隔离副作用、固定时间值并谨慎更新。
快照测试不是截图，它序列化的是组件的渲染结构
快照测试（如 Jest 的 toMatchSnapshot()）不保存像素图像，而是将组件在特定 props 下的 React 元素树（或 Vue 的 VNode、Svelte 的 DOM diff 输出）序列化为纯文本 JSON。一旦结构变化——比如加了 className、改了 data-testid、多套了一层 div、甚至只是调整了 JSX 中属性顺序——快照就会失败。
这意味着：它对视觉“稳定”的保障是间接且脆弱的。真正影响视觉的 CSS 变更（如 margin 调整、display: flex 改成 grid）完全不会触发快照失败，除非这些变更导致了 DOM 结构变化。
- 快照适合捕获“意外的结构退化”，比如某次重构删掉了关键
aria-label或嵌套逻辑出错导致按钮消失 - 不适合替代视觉回归测试（如 Chromatic、Storybook Diff）或手动 UI 验收
- 运行时必须保证组件可渲染（无未 mock 的 context、无真实 API 调用、无副作用 hook）
React + Jest 快照测试必须隔离副作用和异步逻辑
常见失败不是因为 UI 变了，而是因为组件内部触发了未处理的副作用：发起请求、读取 localStorage、调用 useEffect 里未 mock 的第三方 SDK、甚至只是用了 Date.now() —— 这些都会让快照每次运行结果不一致，或直接报错。
正确做法是：在测试前用 jest.mock() 拦截所有外部依赖，并用 act() 包裹渲染过程。
import { render } from '@testing-library/react';
import { act } from 'react-dom/test-utils';
// mock 掉可能触发副作用的模块
jest.mock('../api/fetchUser');
jest.mock('lodash/debounce');
test('renders UserProfile with static data', () => {
const user = { id: 1, name: 'Alice', avatarUrl: '/a.jpg' };
// act 确保 useEffect 等完成
act(() => {
render(<UserProfile user={user} />);
});
expect(screen.container).toMatchSnapshot();
});
- 避免在组件顶层或
useEffect中执行未 mock 的异步操作 - 时间敏感值（如
new Date().toISOString()）需用jest.useFakeTimers()+jest.setSystemTime()固定 - 不要在快照测试中 assert 文本内容 —— 那该用
screen.getByText()，快照只管结构轮廓
快照文件膨胀和误更新是最大维护成本
一个中等复杂组件（含 3–5 个子组件、2–3 种状态）很容易生成 50+ 行快照。一旦父组件 props 结构微调（比如把 config: { theme: 'dark' } 拆成 theme="dark"），所有下游快照全红，且你得逐个确认是否“预期变更”。
更危险的是：开发者看到 CI 报红，顺手敲 jest --updateSnapshot 全量覆盖 —— 于是所有结构性退化都被静默合入。
- 只对「稳定态」做快照：比如
isLoading={false}、error={null}、items={mockData} - 禁用全局
--updateSnapshot，CI 中设ci:true并禁止自动更新 - 对动态内容（ID、时间戳、随机 key）用
expect.addSnapshotSerializer()过滤或替换 - 考虑用
toMatchInlineSnapshot()把快照内联到测试文件，便于 code review 时一眼看到变更点
快照无法覆盖响应式、交互态与跨浏览器差异
一个 Modal 组件在 isOpen={true} 下的快照，只反映它“被挂载时的初始 DOM”，不包含点击关闭按钮后的状态切换、键盘焦点移动、:hover 样式生效、或 Safari 下 Flex 布局的细微偏移。
如果你的组件依赖 window.matchMedia 或 getComputedStyle，默认 JSDOM 环境根本不会触发对应逻辑，快照看起来永远“正确”。
- 需要验证交互流程？写显式行为测试：
fireEvent.click(screen.getByRole('button'))+expect(...).toBeInTheDocument() - 要测响应式断点？用
jest-environment-jsdom-sixteen+ 手动设置Object.defineProperty(window, 'matchMedia', {...}) - CSS 视觉一致性？必须上真实浏览器截图比对工具，快照对此完全无感
快照的价值不在“证明 UI 没变”，而在于快速暴露“结构是否意外断裂”。把它当成 CI 里的第一道结构防火墙，而不是最后一道视觉质检员。越复杂的 UI，越要搭配 Storybook + Chromatic + 手动走查，快照只是其中最轻量、也最容易被滥用的一环。
