探索 Jest 中的快照测试：优点和缺点

编写 Jest 测试多年后，我最近偶然发现了快照测试 — Jest 中的一项功能，可以简化对某些类型代码（尤其是 UI 组件）的测试。如果您不熟悉，快照测试是断言组件的渲染输出没有意外更改的一种方法。 Jest 生成组件输出的“快照”并存储它。未来的测试会将当前输出与此快照进行比较，标记可能表明意外更改的差异。

在这篇文章中，我将分享迄今为止在 Jest 中进行快照测试的经验，包括我在此过程中遇到的优点和缺点。让我们开始吧！

什么是快照测试？

快照测试是一种捕获组件或函数的输出并将其保存为文件的测试技术。当您运行测试时，Jest 会将当前输出与保存的快照进行比较，以确定是否有任何更改。

这是 Jest 中快照测试的简单示例：

// myComponent.test.js
import renderer from 'react-test-renderer';
import Link from '../Link';

it('renders correctly', () => {
  const tree = renderer
    .create(<Link page="http://www.facebook.com">Facebook</Link>)
    .toJSON();
  expect(tree).toMatchSnapshot();
});

在此测试中，Jest 渲染 MyComponent 并将输出保存为快照。

// myComponent.test.js.snap
exports[`renders correctly 1`] = `
<a
  className="normal"
  href="http://www.facebook.com"
  onMouseEnter={[Function]}
  onMouseLeave={[Function]}
>
  Facebook
</a>
`;

在后续测试运行中，Jest 会将新输出与保存的快照进行比较，以检查是否有任何更改。如果输出发生变化，Jest 会提醒您，以便您查看差异。

快照测试的优点

1. 快速而简单： 创建快照测试很快。通过运行 toMatchSnapshot()，Jest 自动保存组件当前结构的快照，让您可以专注于功能。生成的快照存储在 .snap 文件中，并与其他快照一起进行版本控制，使更改易于代码审查。

2. 减少样板文件：快照测试可以帮助消除重复的断言，特别是在处理复杂的 UI 结构时。这在 UI 状态频繁变化的 Vue 或 React 中特别有用。

3. 捕获意外更改：快照测试非常适合捕获代码中的意外更改。如果 UI 组件的输出意外更改，Jest 会将其标记为失败的测试，提示您查看更改。这可以帮助您及早发现回归并防止 bug 被漏掉。

快照测试的缺点

1. 脆弱的测试：快照测试的缺点之一是随着时间的推移测试可能会变得脆弱。如果您的 UI 组件经常更改，则快照可能也需要经常更新。这可能会导致测试结果中出现大量噪音，并使识别真正问题变得更加困难。此外，大型快照可能会导致一种称为“快照盲目性”的现象，即开发人员在没有仔细检查的情况下盲目地批准更改。

2. 缺乏上下文：当快照测试失败时，理解输出发生变化的原因可能会很困难。 Jest 提供了更改的视觉差异，但它并不总是为您提供导致更改的完整上下文。这可能会使调试失败变得更加困难，尤其是对于复杂的组件。

3. 有限的洞察力：虽然快照检查组件的结构是否未更改，但它们不验证行为方面。您可能仍然需要单元或集成测试来涵盖这些情况。快照测试最适合测试组件的视觉输出，而不是它们的功能。

结论

Jest 中的快照测试是一个强大的工具，用于测试 UI 组件并捕获代码中的更改。虽然它具有多种优点，例如易于设置和捕获意外更改，但它也有其缺点，例如脆弱的测试和误报。对于不经常更改并因此具有稳定快照的组件，最好谨慎使用快照测试。同样重要的是要记住，快照测试只是测试难题的一部分，应与其他测试策略结合使用，以确保全面的测试覆盖率。

总体而言，快照测试是测试工具库中一项有用的技术，但与任何工具一样，明智地使用它并了解其局限性至关重要。通过权衡快照测试的优缺点，您可以就其是否适合您的测试工作流程做出明智的决定。

以上是探索 Jest 中的快照测试：优点和缺点的详细内容。更多信息请关注PHP中文网其他相关文章！