介绍
在前端开发中，UI 测试是非常重要的一部分，但是在 React Native 开发中，测试可以变得更加有挑战性——由于 RN 的灵活性，它允许我们用 JavaScript 编写 Native UI，这意味着我们需要写测试代码以确保不仅 JS 的功能正常，还要确保我们的 UI 组件也符合我们的预期。这时候，Enzyme 就是一个非常好用的测试工具了。
Enzyme 是由 Airbnb 开发的 React 测试工具。它可以模拟渲染 React 组件，并使用 jQuery 风格的 API 操作 UI 组件。Enzyme 提供了一些非常好用的测试工具，可以让开发者快速编写和运行测试代码，减少测试时间和开发成本。在本文中，我们将介绍如何使用 Enzyme 进行 RN 的 UI 测试，并提供一些示例代码。
安装
在开始之前，请确保您已经正确安装了 React Native 和 Node.js。Enzyme 需要与 Jest 或 Mocha 结合使用，所以您需要安装它们之一。在这里，我们将以 Jest 为例进行介绍。
运行以下命令安装 Enzyme 和相关插件：
--- ------- ---------- ------ ----------------------- ------------------- ----------- ----
安装完成之后，我们需要在 package.json 中配置 Jest，以便允许 Enzyme 使用 Jest：
-
------- -
--------------------- --------------------------------------------
------------------ ---------
---------- -----
-------------------------- -
---------------------------------
--
------------ -
-------------- ------------
-
-
-其中 "setupFilesAfterEnv": ["./node_modules/jest-enzyme/lib/index.js"], tells jest to configure itself with enzyme. "transformIgnorePatterns": ["node_modules/(?!(jest-)?enzyme)"], tells jest to leave enzyme and jest-enzyme alone when jest is transpiling modules. "transform": {"^.+\\.jsx?$": "babel-jest"} tells jest to use Babel to transpile modules
接下来，我们需要在 RN 项目的 index.js 文件中配置 Enzyme 适配器：
-- -------- ------ - ----------- - ---- --------------- ------ --- ---- -------- ------ - ---- -- ------- - ---- ------------- ------ - --------- - ---- --------- ------ ------- ---- -------------------------- -- --- -- -------- ----- ------- ----------- -------- --- --------- --- -------------------------------------- -- -- -----
现在，我们已经可以开始编写 UI 测试代码了。
测试
我们假设您已经有一个 React Native 项目，并且你想对其中一个 UI 组件进行测试。首先，我们需要创建一个测试文件。假设我们的目标组件名为 MyComponent，文件位于 src/components/MyComponent.js，我们可以在同级目录下创建一个测试文件 MyComponent.test.js，并输入以下内容：
-- -------------------
------ ---------------
------ ----- ---- --------
------ ----------- ---- -----------------------------------
------ - ------- - ---- ---------
----------------------- -- -- -
----------- ----------- -- -- -
----- ------- - -------------------- ----
----------------------------------
---
---上面的测试代码使用了 Jest 的快照测试功能，并使用 Enzyme 的 shallow() 方法进行渲染。shallow() 方法只会渲染传入的顶级元素，如果有子组件，只会返回它们的占位符。这是一个非常好用的方法，它可以减少测试组件时的计算量。使用 shallow() 方法时，我们通常可以模拟用户行为和查找组件的相关函数/属性。
当我们第一次运行测试时，Jest 会为我们保存一个快照文件。这个快照文件可以包含组件渲染后的 HTML 代码、CSS 样式等信息。每次改变组件时，我们可以运行测试，并得到一个新的快照文件。如果新文件与旧文件不同，Jest 将会提醒我们，并提示保存一份新的快照。这是快速测试组件的好方法，但在某些情况下并不可靠，如添加了新的子组件时，或随机数据的使用时，会导致快照与组件不匹配。我们需要时刻检查快照文件，以确保其准确性。
更多测试实例
除了基本的渲染测试之外，我们还可以使用 Enzyme 进行更多类型的测试，如 simulate() 方法模拟用户行为，find() 方法查找元素等。下面是一个简单的实例：
-- -------------------
------ ---------------
------ ----- ---- --------
------ ----------- ---- -----------------------------------
------ - ------- - ---- ---------
----------------------- -- -- -
----------- ----------- -- -- -
----- ------- - -------------------- ----
----------------------------------
---
---------- ---- ------- ------ -- -- -
----- ------- - -------------------- ------------ ------ ----
------------------------------------------------- --------
---
---------- ---- ------- ------ ---- ------ -- --------- -- -- -
----- ------ - ----------
----- ------- - --------
------------ ------------ ---------------- --
--
----- ------ - ---------------------------------
-------------------------
----------------------------------
---
---在上面的代码中，我们测试 MyComponent 是否具有正确的文本内容，是否可以触发点击事件。我们使用了 find() 方法来查找元素、simulate() 方法模拟用户点击事件，并使用 Jest 的 mockFn 来测试调用组件传入的回调函数是否正确执行。
结论
React Native 开发中，UI 测试是不可缺少的一部分。使用 Enzyme，我们可以方便地对组件进行测试，减少测试成本，提高项目的稳定性。本文介绍了 Enzyme 的基本用法，并提供了一些测试实例。我们鼓励开发者在项目中使用 Enzyme 进行测试，以增强代码的可维护性，减少不必要的错误和 Bug。
更多实例请参考：Enzyme文档
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672f0131eedcc8a97c8bee90