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

# Web 开发# JavaScript# 软件测试

在编写 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(Facebook)
    .toJSON();
  expect(tree).toMatchSnapshot();
});

在这个测试中，Jest 渲染了 `MyComponent` 并将输出保存为快照。

// myComponent.test.js.snap
exports[`renders correctly 1`] = `

  Facebook

`;

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

快照测试的优点

  • 快速简单：创建快照测试非常快。通过运行 toMatchSnapshot()，Jest 会自动保存组件当前结构的快照，让您可以专注于功能。生成的快照存储在 .snap 文件中，并与您的其余部分一起进行版本控制，使更改易于进行代码审查。
  • 减少样板代码：快照测试有助于消除重复断言，尤其是在处理复杂的 UI 结构时。这在 Vue 或 React 中尤其有用，因为 UI 状态经常发生变化。
  • 捕捉意外更改：快照测试非常适合捕捉代码中的意外更改。如果 UI 组件的输出发生意外更改，Jest 会将其标记为失败的测试，并提示您检查更改。这可以帮助您尽早发现回归问题并防止错误从漏洞中溜走。

    • 快照测试的缺点

  • 脆弱的测试：快照测试的缺点之一是测试可能会随着时间的推移变得脆弱。如果您的 UI 组件频繁更改，快照可能也需要频繁更新。这会导致测试结果中出现大量噪音，并使识别真正的问题变得更加困难。此外，大型快照可能会导致一种称为“快照盲目性”的现象，即开发人员盲目地批准更改而不仔细检查它们。
  • 缺乏上下文：快照测试失败时，很难理解输出发生变化的原因。Jest 提供了更改的视觉差异，但它并不总是能为您提供导致更改的完整上下文。这会使调试失败变得更加困难，尤其是对于复杂的组件。
  • 洞察力有限：虽然快照可以检查组件的结构是否发生变化，但它们无法验证行为方面。您可能仍需要单元测试或集成测试来涵盖这些情况。快照测试最适合测试组件的视觉输出，而不是其功能。

    • 结论

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

    总体而言，快照测试是测试工具中一项有用的技术，但与任何工具一样，必须谨慎使用它并了解其局限性。通过权衡快照测试的利弊，您可以做出明智的决定，确定它是否是您的测试工作流程的正确选择。