编辑“︁JavaScript快照测试”︁（章节）

= JavaScript快照测试 =

'''快照测试'''（Snapshot Testing）是JavaScript测试中一种高效的回归测试技术，通过捕获组件或函数的输出结果（如HTML结构、JSON数据等），将其与预存的“快照”文件对比，确保代码修改不会意外改变预期行为。它特别适合React、Vue等前端框架的UI测试，也可用于纯JavaScript逻辑验证。

== 核心概念 ==
快照测试基于以下原理：
# '''首次运行'''：生成输出结果的序列化快照（通常为文本文件），存储在版本控制中。
# '''后续运行'''：重新生成输出并与存储的快照对比，差异将触发测试失败。
# '''更新机制'''：当预期变更时，开发者可确认差异并更新快照。

数学表达上，快照测试验证函数<math>f(x)</math>的输出是否满足：
<math>\forall x \in X, f(x) \equiv S(x)</math>
其中<math>S(x)</math>是存储的快照。

== 工作原理 ==
<mermaid>
graph LR
    A[执行测试代码] --> B[生成输出]
    B --> C{快照存在?}
    C -->|否| D[保存为新快照]
    C -->|是| E[对比现有快照]
    E --> F{匹配?}
    F -->|是| G[测试通过]
    F -->|否| H[提示差异]
</mermaid>

== 实现示例 ==
=== 使用Jest进行快照测试 ===
以下示例测试一个React组件：

<syntaxhighlight lang="javascript">
// Button.js
import React from 'react';

const Button = ({ label }) => (
  <button className="btn">{label}</button>
);

export default Button;
</syntaxhighlight>

测试文件：
<syntaxhighlight lang="javascript">
// Button.test.js
import React from 'react';
import renderer from 'react-test-renderer';
import Button from './Button';

test('Button renders correctly', () => {
  const tree = renderer
    .create(<Button label="Click me" />)
    .toJSON();
  expect(tree).toMatchSnapshot();
});
</syntaxhighlight>

'''首次运行输出'''：
在<code>__snapshots__/Button.test.js.snap</code>中生成：
<syntaxhighlight lang="javascript">
exports[`Button renders correctly 1`] = `
<button
  className="btn"
>
  Click me
</button>
`;
</syntaxhighlight>

=== 纯函数测试示例 ===
<syntaxhighlight lang="javascript">
// formatUser.js
export const formatUser = (user) => ({
  displayName: `${user.firstName} ${user.lastName}`,
  age: user.age > 18 ? 'adult' : 'minor'
});

// formatUser.test.js
import { formatUser } from './formatUser';

test('formats user correctly', () => {
  const user = { firstName: 'John', lastName: 'Doe', age: 25 };
  expect(formatUser(user)).toMatchSnapshot();
});
</syntaxhighlight>

生成快照：
<syntaxhighlight lang="javascript">
exports[`formats user correctly 1`] = `
Object {
  "displayName": "John Doe",
  "age": "adult",
}
`;
</syntaxhighlight>

== 最佳实践 ==
1. '''小快照'''：保持快照精简，只包含必要数据
2. '''明确更新'''：使用<code>jest -u</code>或等效命令更新快照
3. '''版本控制'''：将快照文件纳入代码仓库
4. '''避免动态数据'''：如日期、随机数需被mock
5. '''组件测试'''：适合不常变动的展示型组件

== 实际应用场景 ==
'''案例：电商产品卡片'''
测试组件在不同props下的渲染一致性：
<syntaxhighlight lang="javascript">
test('ProductCard renders with discount', () => {
  const product = { name: 'Smartphone', price: 599, discount: 15 };
  expect(render(<ProductCard product={product} />)).toMatchSnapshot();
});

test('ProductCard renders without discount', () => {
  const product = { name: 'Headphones', price: 99, discount: 0 };
  expect(render(<ProductCard product={product} />)).toMatchSnapshot();
});
</syntaxhighlight>

== 常见问题 ==
{| class="wikitable"
|-
! 问题 !! 解决方案
|-
| 快照频繁失败 || 检查是否包含动态数据，或组件逻辑是否过于复杂
|-
| 快照文件过大 || 拆分测试用例，只捕获关键输出
|-
| 误报差异 || 使用<code>toMatchInlineSnapshot()</code>将快照嵌入测试文件
|}

== 进阶技巧 ==
* '''行内快照'''：使用<code>toMatchInlineSnapshot()</code>将快照直接嵌入测试文件
* '''属性匹配器'''：对动态值使用不对称匹配器：
<syntaxhighlight lang="javascript">
expect(formatUser(user)).toMatchSnapshot({
  createdAt: expect.any(Date)  // 动态日期字段
});
</syntaxhighlight>

== 总结 ==
快照测试通过自动化输出对比显著提升UI和数据结构测试效率，尤其适合：
* 组件库开发
* API响应格式验证
* 配置对象生成
* 任何需要保持输出稳定的场景

通过合理使用快照测试，开发者可以快速捕获非预期变更，同时需注意避免过度依赖导致测试脆弱性。

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript测试]]