Jest 是一个流行的 JavaScript 测试框架，可用于测试前端代码。它具有许多有用的功能，包括 Snapshot。然而，最近一些开发人员报告了 Jest Snapshot 功能的稳定性问题。本文将探讨 Jest Snapshot 功能不稳定的原因，以及如何解决这些问题。
问题描述
许多开发人员在使用 Jest Snapshot 功能时，遇到了一些问题。一些开发人员报告说，当他们对应用程序进行了更改后，测试结果与之前的快照不同。这意味着他们需要手动更新快照，这可能非常繁琐。此外，一些开发人员还报告说，如果他们在当前代码中使用了局部变量或随机数等动态值，速览快照功能就会出现问题。
原因分析
为什么会出现这些问题呢？Jest Snapshot 背后的原理是将当前组件视图的快照与以前保存的快照进行比较。如果它们匹配，测试通过。如果它们不匹配，测试失败。这听起来非常简单，但它却有一些限制。如果当前组件的视图结构发生了更改，那么快照也会更改。这意味着旧的快照将不再有效，需要手动更新。
另一个问题是，当组件的视图包含动态元素（例如局部变量或随机数）时，快照不能正确地反映组件的最终状态。如果每次测试运行时元素的值都不同，那么快照也会不同。这样就需要更新对应的快照。
解决方案
虽然存在这些问题，但 Jest Snapshot 的功能仍然非常有用。因此，一些开发人员尝试了几种方法来解决这些问题。
配置 updateSnapshot
默认情况下，如果 Jest 检测到快照与以前保存的快照不同，它会将测试标记为失败。但是，您可以向 Jest 提供 --updateSnapshot 标志，以告诉它更新旧的快照。每个测试都会自动更新旧的快照。
npm test -- --updateSnapshot
使用 toMatchInlineSnapshot
使用 toMatchSnapshot 可能会导致维护快照非常困难，尤其是在代码发生变化时。因此，您可以尝试使用 toMatchInlineSnapshot。用这个方法，我们可以直接在测试用例中编写快照，而无需单独创建一个 .snap 文件。这样不仅可以避免不必要的文件创建，还可以在测试用例中更直接地维护快照。
以下是使用 toMatchInlineSnapshot 的示例代码:
it('should render correctly', () => {
const tree = renderer.create(<App />).toJSON();
expect(tree).toMatchInlineSnapshot();
});当您运行测试时，Jest 会提示您参考内联快照并选择是否更新快照。
实现自动化生成的快照和手动更新
虽然手动更新快照是最困难的工作之一，但是可以借助一些钩子函数自动化这一过程。
以下是实现此目标的 Jest 测试框架钩子函数：
// javascriptcn.com 代码示例
beforeAll(() => {
jest.addSnapshotSerializer(createSerializer({
map: {
'string': value => `"${value}"`,
}
}))
})
it('should render correctly', () => {
const tree = renderer.create(<App />).toJSON();
expect(tree).toMatchSnapshot();
});Jest 的 beforeAll 钩子函数用于告诉 Jest 自动添加快照序列化程序。然后我们可以在测试用例中使用 toMatchSnapshot() 函数生成快照。如果在生成快照后，测试结果错误，则可以手动更新旧的快照。
总结
Jest Snapshot 功能是一个非常强大的测试工具，但它不是完美的。由于某些原因，它可能会有不稳定的情况。我们已经介绍了几种解决方法，包括配置 updateSnapshot、使用 toMatchInlineSnapshot 等。希望这些解决方案能帮助您更好地使用 Jest Snapshot 功能。为了获得最佳结果，请根据需要调整每种解决方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65ac7fdfadd4f0e0ff613f5a