Jest 是一个广为使用的 JavaScript 测试框架，它可以用于测试各种类型的 JavaScript 应用程序，包括前端应用程序。在 React 应用程序的测试中，Jest 提供了 Snapshot 测试，这是一种非常有用的测试工具。
使用 Snapshot 测试，你可以创建一个 React 组件的视觉快照，然后将其用于后续的测试中。当 React 组件的外观或行为发生变化时，你可以比较新的快照与旧的快照，并在需要的情况下进行更新。
在本文中，我们将介绍如何在 Jest 中使用 Snapshot 测试 React 组件。我们将会首先了解 Jest 中的 Snapshot 测试是什么，以及它的优点和缺点。然后我们将介绍如何使用 Jest 的快照测试来测试我们的 React 应用程序中的组件，以及如何更新快照。
什么是 Jest Snapshot 测试？
Jest Snapshot 测试是一种非常有用的测试形式，它允许我们参照组件的外观和行为的快照，以便我们能够检测它们是否与之前的快照相同。这些快照是由测试代码自动生成的，并保存在测试目录中的“snapshots”目录中。
优点：
- 可以避免从经验上知道组件在更新后看起来应该是什么样子。
- 可以确保视觉上组件的可靠性。
- 可以节省时间与资源，因为组件的正确性可以在没有人为干扰的情况下进行检查。
缺点：
- 修改测试过程可能会导致不必要的更新。
- 如果不适当地使用，则可能不利于应用维护。
- 可能需要额外的工作来保持快照正确。
如何使用 Jest Snapshot 测试？
以下是如何在 Jest 中使用 Snapshot 测试的步骤。
第一步：安装 Jest
要使用 Jest 快照测试，你需要首先安装 Jest。可以在命令行中输入以下命令进行安装：
npm install jest --save-dev
现在，我们已经安装了 Jest，我们可以开始编写我们的测试代码。
第二步：创建一个测试文件
我们将创建一个测试文件来测试一个简单的 React 组件。假设我们有一个名为“Button”的组件，我们想要测试它。
我们可以在项目中的“tests”目录中创建一个名为“Button.test.js”的文件。这个文件将包含我们的测试代码。
第三步：编写测试代码
使用 Jest 来编写快照测试非常简单。我们将使用 “toMatchSnapshot()”函数来创建组件的快照，并将其用于测试。
以下是我们的“Button.test.js”文件的示例代码：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- ---------------------- ------ - ------ - ---- ------------ ------------ -------- ------ -- -- - ----- --------- - ----------------------- ---- ----- ---- - ------------------- ------------------------------- ---
在这个示例中，我们导入了 React 和“renderer”模块，然后创建了一个名为“Button”的组件，并将其渲染为 JSON 树。
然后，我们使用 “toMatchSnapshot()”函数来比较 JSON 树和之前生成的快照。如果两者相同，测试通过；否则，测试失败。
第四步：运行测试
现在，我们已经编写了我们的测试代码，我们可以运行 Jest 来运行测试。
输入以下命令以运行测试：
npm test
Jest 将会使用我们编写的测试代码，来测试我们的 React 组件。如果测试通过，Jest 将生成一个新的快照，并将其保存在“snapshots”目录中。
如果测试失败，我们可以运行以下命令来查看失败原因：
npm test -- --verbose
此命令将输出更详细的错误信息，以帮助我们找到问题。
第五步：更新快照
如果我们在组件中进行了更改，我们需要更新快照，以便进行正确的比较。
在测试失败时，Jest 将输出一个信息，提示我们要更新快照。我们只需要按照指示来更新快照即可。
如果我们知道我们所做的变化是合理的，我们可以使用以下命令来更新快照：
npm test -- --updateSnapshot
这将更新我们的快照，以便与修改后的组件进行比较。
结论
Jest Snapshot 测试是一种非常有用的测试工具，可以帮助我们检查 React 组件的外观和行为是否正确。它允许我们创建一个可视化的组件快照，并在后续测试中使用它。
当我们在代码中进行更改时，Jest 快照测试能够确保我们的组件看起来始终正确。这减少了开发时间和资源，避免了不必要的手动检查。
因此，我们建议你将 Jest Snapshot 测试用于你的 React 应用程序中，以确保你的组件的正确性和可靠性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67131634ad1e889fe20a568a