React Native 是一个用于构建跨平台移动应用程序的开源框架。而 Enzyme 是一个流行的 JavaScript 测试实用程序库，它允许开发人员模拟 React 组件中的交互和行为，并对其进行测试。在 Enzyme 测试中使用 Snapshot 是一种快速而有效的方法，它可以以可读性强且易于维护的方式测试 React Native 组件。本文将为您详细介绍如何在 Enzyme 测试中使用 Snapshot 来测试 React Native 组件，以及如何最大限度地利用它们。
Enzyme 简介
Enzyme 是一个 React 的测试实用程序库，它允许开发人员进行交互性和行为测试，并提供了可读性高和易于维护的 API。Enzyme 提供了三种渲染方式：第一个是 shallow rendering（浅层渲染），它只渲染传递给组件的 props 和组件自身而不渲染任何子组件。第二个是 mounting（挂载），它将组件完全渲染为真正的 DOM，用于测试组件的生命周期方法并进行全面的交互测试。第三个是 rendering（渲染），它将组件渲染为静态 HTML，并返回一个字符串。
在 Enzyme 测试中使用 Snapshot
Snapshot 是一种测试方法，它会生成一个组件的 UI 树以及所有包含在其中的子组件，并将其保存在一个文件中。在后续测试中，每当我们对组件进行更改时，快照测试都将比对两个 UI 树以检查是否存在任何不同之处。如果快照检测发现 UI 树与以前保存的快照不同，它就会引发一个失败。因此，在对 React Native 组件进行测试时，快照测试可以很好地帮助我们发现组件的可见变化并及时修复它们。
若要使用 Enzyme 进行快照测试，我们需要安装以下依赖项：
--- ------- ---------- -------------- ------ -------------------
然后我们需要在测试代码中编写必要的代码以实现快照检测。以下是一个使用 Enzyme 和 Jest 进行快照测试的示例代码：
------ ----- ---- --------
------ - -------- ------ ------ - ---- ---------
------ ------ ---- -----------------
------ ----------- ---- ----------------
--------------------- ----------- -- -- -
------------- ----------- -- -- -
----- --------- - --------
------------ --
--
--------------------------------------------
---
----------- ------- -- -- -
----- ------ - ----------
----- --------- - ------
------------ ---------------- --
--
-------------------------------------------
----------------------------------
---
---在上面的代码中，我们首先引入了 React、Enzyme、Enzyme-to-JSON 和 React Test Renderer 库，并准备测试使用的组件。在我们的测试中，我们使用了三种不同的 Enzyme 渲染方法：浅层渲染、挂载和渲染方法。我们使用 shallow 方法来渲染组件，并将其存储在名为 component 的变量中。接下来，我们使用 toJson 方法将组件转换为一个快照字符串，并在测试中将其与以前保存的快照进行比较，以查找任何差异。
此外，我们还在测试代码中添加了一个单击事件和一个 MockFn，以测试组件的交互行为。在这个测试中，我们使用 mount 方法挂载组件，并模拟单击事件，最后检查 MockFn 是否已被调用。
结论
在 Enzyme 测试中使用快照来测试 React Native 组件可以帮助我们快速地发现组件的可见变化并及时修复它们。使用 Enzyme 进行快照测试的关键是安装必要的依赖项并编写必要的测试代码，以实现快照检测。在以后的开发中，我们还应该牢记，全面的测试是确保所开发应用程序质量的关键。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670e6ea35f5512810260dd59