Jest 是一个流行的 JavaScript 测试框架，可以用来测试前端应用程序的各个方面。其中一个非常有用的功能是 Jest 快照（Jest Snapshot），它可以用来简化测试的编写，并使测试结果更容易理解。
在本文中，我们将深入探讨 Jest 快照的工作原理，以及如何更好地使用它来捕获和管理更改。我们还将提供一些示例代码，以帮助你更好地理解这个功能。
什么是 Jest 快照？
Jest 快照是一种测试技术，它可以将组件的输出与先前保存的快照进行比较。如果它们不匹配，测试将失败。这种方法非常适合测试 UI 组件，因为它可以捕获组件的渲染输出，包括 HTML、CSS 和 JavaScript。
使用 Jest 快照可以简化测试的编写过程，因为你不需要手动编写每个测试用例。相反，你只需要生成一个快照，并将其保存到文件中。每次运行测试时，Jest 将自动比较组件的输出与先前保存的快照。
如何使用 Jest 快照？
使用 Jest 快照非常简单。首先，你需要安装 Jest：
npm install --save-dev jest
然后，你可以编写一个测试用例，如下所示：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- ---------------------- ------ ------ ---- ----------- ------------ --------- ------ ----- ---------- -- -- - ----- --------- - ----------------------- ---- ----- ---- - ------------------- ------------------------------- ---
在这个例子中，我们使用 renderer.create 方法创建了一个 React 组件的实例，并将其转换为 JSON 对象。然后，我们使用 expect(tree).toMatchSnapshot() 来比较组件的输出与先前保存的快照。如果它们不匹配，测试将失败。
当你第一次运行这个测试用例时，Jest 将会生成一个新的快照，并将其保存到文件中。你可以在控制台中看到类似于下面的输出：
-- -------------------- ---- -------
- -------
----------- --------------------
--------------------------------------------
-------- -------
- - -------- ------- ---- - ---- ------
---- ------- - ------- - -----
------ - ------- - -----
---------- - -------- - -----
----- ----- -- --------- - -
--- --- ---- ------ -------- ------------------此后，每次运行测试时，Jest 将使用先前保存的快照来比较组件的输出。如果组件的输出已更改，你将会在控制台中看到类似于下面的输出：
● Button component should match snapshot Snapshot has changed ...
在这种情况下，你需要检查组件的输出，并决定是否需要更新快照。如果你决定更新快照，只需按下 u 键即可。
如何管理 Jest 快照？
管理 Jest 快照非常重要，因为它们可能会变得非常庞大，并且可能会难以维护。以下是一些管理 Jest 快照的最佳实践：
1. 将快照文件保存在单独的文件夹中
将快照文件保存在单独的文件夹中，可以使它们更容易找到和维护。你可以使用 Jest 的 --snapshotDir 选项来指定快照文件夹的路径。例如：
jest --snapshotDir __snapshots__
2. 使用 toMatchSnapshot() 方法
使用 toMatchSnapshot() 方法可以使快照文件更易于阅读和维护。当你使用 toMatchSnapshot() 方法时，Jest 将会自动生成一个易于阅读的快照文件，其中包含组件的渲染输出和其他相关信息。例如：
test('Button component should match snapshot', () => {
const component = renderer.create(<Button />);
const tree = component.toJSON();
expect(tree).toMatchSnapshot();
});3. 使用 toMatchInlineSnapshot() 方法
当你需要快速查看组件的输出时，可以使用 toMatchInlineSnapshot() 方法。当你使用 toMatchInlineSnapshot() 方法时，Jest 将会在测试代码中嵌入一个快照。例如：
-- -------------------- ---- -------
------------ --------- ------ ----- ---------- -- -- -
----- --------- - ----------------------- ----
----- ---- - -------------------
------------------------------------
--------
----- ---
---------
---
---4. 定期清理快照文件
定期清理快照文件可以确保它们不会变得过于庞大，并且不会包含过时的信息。你可以使用 Jest 的 --updateSnapshot 选项来自动清理快照文件。例如：
jest --updateSnapshot
结论
Jest 快照是一个非常有用的测试技术，可以使测试更加简单和易于维护。在本文中，我们深入探讨了 Jest 快照的工作原理，并提供了一些管理 Jest 快照的最佳实践。我们希望这篇文章对你有所帮助，并能够帮助你更好地使用 Jest 快照来测试你的前端应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/673382e10bc820c58242c510