React Native 是由 Facebook 推出的跨平台移动应用开发框架，让开发者可以用一套代码同时构建 iOS 和 Android 应用。然而，增长快速的代码库需要稳定的基础，为了确保代码质量和稳定性，单元测试是必不可少的。
本文将介绍如何使用 Enzyme 生成快照测试。这将使您编写测试变得更容易，因为它只需要检查组件输出的快照而不是可变的 DOM 元素。
快照测试的工作原理
快照测试是将组件渲染到静态 HTML 内容，然后通过比较输出的 HTML 与预期值来检查组件的正确性。
在测试用例中，我们将使用 Jest 和 Enzyme 的帮助来创建一个简单的测试套件。
安装和配置
首先，我们需要安装 Jest，创建 package.json 文件并添加以下代码：
--- ---- -- --- ------- ---------- ----
我们还需要安装 Enzyme 和 Enzyme Adapter：
--- ------- ---------- ------ -----------------------
并且在项目中添加以下代码：
------ ------ ---- --------- ------ ------- ---- -------------------------- ------------------ -------- --- --------- ---
这样就可以进行快照测试了！
编写测试用例
我们将创建一个 Dice 组件来模拟掷骰子游戏。该组件应该输出一个随机数字，并且每次渲染时数字应该改变。我们将为这个组件编写测试用例。
------ ----- ---- --------
------ - ------- - ---- ---------
------ ---- ---- ---------
--------------- ---- -- -- -
---------- ------ - ---------- -- -- -
----- ------- - ------------- ----
----------------------------------
---
---------- -------- - --- ---- ---- ----- -------- --- -------- -- -- -
----- ------- - ------------- ----
----- ------ - -----------------------
----- ----------- - ----------------------------
-------------------------
----- ------- - ----------------------------
--------------------------------------
---
---第一个测试案例使用了快照测试，这将验证组件的渲染不变性。我们期望组件在不同的情况下始终渲染相同的 HTML 模板。如果这个测试失败了，我们将能够看到更新的快照，并决定是否接受或拒绝它。
第二个测试案例测试了点击按钮是否更新了组件的数字值。
在命令行中运行测试
编写测试用例后，我们可以使用 Jest 运行这些测试案例。
在 package.json 文件中，添加以下线路：
---------- -
------- ----- ---------- ----------
-然后在命令行中执行以下命令：
--- ----
结论
在本文中，我们了解了如何使用 Enzyme 生成快照测试来测试组件是否按照预期工作。这样的测试策略比传统的 DOM 测试更容易编写和维护，有助于确保代码质量和稳定性。
代码示例：
------ ------ - --------- - ---- --------
----- ---- ------- --------- -
------------- -
--------
---------- - -
----- -
--
------------- - -------------------------
-
---------- -
----- ---- - ------------------------ - -- - --
--------------- ---- ---
-
-------- -
------ -
-----
------ ---- ---- --- ----------------------------------
------- ---------------------------- --- -------------
------
--
-
-
------ ------- -----来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6708b111d91dce0dc873a8aa