前言
在前端开发中，UI 测试是至关重要的一部分。我们需要确保我们的组件在各种情况下都能正确地显示和渲染。而 Jest 中的 snapshot 功能可以帮助我们完成这个任务。
什么是 snapshot？
Jest 中的 snapshot 是一种测试方法，它可以帮助我们检查组件的渲染效果是否发生了变化。当我们运行测试时，Jest 会对组件进行渲染，并将渲染结果与之前保存的快照进行比较。如果两者不同，测试就会失败。
如何使用 snapshot？
在 Jest 中使用 snapshot 十分简单。我们只需要在测试中调用 toMatchSnapshot() 方法即可。例如，我们可以编写以下测试用例：
import React from 'react';
import { render } from '@testing-library/react';
import Button from './Button';
test('Button should match snapshot', () => {
const { container } = render(<Button />);
expect(container).toMatchSnapshot();
});在这个测试用例中，我们首先使用 render 方法将 Button 组件渲染到容器中。然后，我们调用 toMatchSnapshot() 方法，将当前的渲染结果与之前保存的快照进行比较。如果两者不同，测试就会失败。
如何更新 snapshot？
当我们修改了组件的代码，它的渲染结果可能会发生变化。此时，我们需要更新快照，以便测试能够正确地运行。
更新快照非常简单。当测试失败时，Jest 会给出一个提示，告诉我们快照已经过期。我们只需要按照提示输入 u 即可更新快照。
可能遇到的问题
在使用 snapshot 时，可能会遇到一些问题。下面是一些常见的问题及解决方法：
快照不稳定
有时候，组件的渲染结果可能会因为一些不稳定的因素而发生变化。例如，时间戳、随机数等。这时候，我们需要使用 Jest 的 toMatchSnapshot 方法的第二个参数，以便忽略这些不稳定的因素。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- -------------------------
------ ------ ---- -----------
------------ ------ ----- ---------- -- -- -
----- - --------- - - -------------- ----
-----------------------------------
----- -------------------
---
---在这个测试用例中，我们使用了 expect.any(Number)，以便忽略时间戳的变化。
快照过期
有时候，我们可能会修改了组件的代码，但是忘记更新快照。这时候，测试就会失败，并提示我们更新快照。我们只需要按照提示输入 u 即可更新快照。
快照不准确
有时候，我们可能会修改了组件的代码，但是快照并没有发生变化。这时候，我们需要检查组件的渲染结果是否正确，以及快照是否正确。
总结
在 Jest 中使用 snapshot 功能可以帮助我们测试组件的渲染效果是否正确。通过快照，我们可以快速地检查组件的渲染结果是否发生了变化。同时，我们需要注意快照的稳定性和正确性，以便测试能够正确地运行。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65d844271886fbafa45ee92a