React Native 作为一种跨平台开发框架，已经成为了前端开发工程师必须要掌握的技能之一。但是，开发过程中出现的 bug 与错误，仍然是难以避免的。为了更好地管理与规避这些问题，我们需要进行有效的 UI 测试。
在 React Native 中，使用 Enzyme 与 Jest 这两个框架，可以快速地进行 UI 测试。Enzyme 是 Airbnb 开源的 React 组件测试库，Jest 是 Facebook 开源的 JavaScript 测试框架。两者配合使用，可以轻松地完成对 React Native 应用程序的 UI 测试。
安装 Enzyme 与 Jest
在 React Native 应用程序中，我们需要通过 npm 安装 Enzyme 与 Jest。首先，在项目根目录下运行以下命令：
npm install enzyme jest @testing-library/react-native --save-dev
接着，在项目根目录下创建一个 .babelrc 文件，内容如下：
-- -------------------- ---- -------
-
---------- -------------------------------------------
---------- -------------------------------------------- ------------
------ -
------- -
---------- ------------
-
-
-在这里，我们在 .babelrc 文件中进行了一些配置，以便让 Enzyme 与 Jest 能够正确运行。其中，module:metro-react-native-babel-preset 是 React Native 的默认预设配置，@babel/plugin-transform-react-native-jsx 插件用于支持 JSX 语法的解析，istanbul 插件用于测试覆盖率的检查。同时，env 配置中的 test 环境，用于让 Enzyme 与 Jest 在测试运行时使用相应的插件。
编写测试用例
在 React Native 中，进行 UI 测试时，需要创建一个 .test.js 文件，在其中编写测试用例。我们可以使用 Enzyme 提供的 shallow、mount、render 等方法来获取 React 组件，并使用 Jest 的 expect 断言库进行验证。
测试用例示例如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ --- ---- --------
------------- ----------- -- -- -
----------- ----------- -- -- -
----- ------- - ------------ ----
----------------------------------
---
---在这个测试用例中，我们首先引入了 React、Enzyme 与我们要测试的组件 App。我们使用 describe 函数定义一个测试用例套件，其中包含了我们要测试的 App 组件。在其内部，我们定义了一个测试用例 it，用于验证组件是否能够正常地渲染。在这个测试用例中，我们使用 shallow 方法获取了 App 组件，并使用 expect 断言库验证它是否正确返回一个快照。
运行测试用例
当测试用例编写完毕之后，我们需要运行它们进行测试。在 React Native 中，可以使用 Jest 自带的 CLI 进行测试。在项目根目录下运行以下命令：
npm test
运行测试之后，Jest 将会自动运行我们编写的测试用例，并输出测试结果。如果测试用例通过，我们将会看到控制台输出一个绿色的 "PASS" 标志；否则，将会输出一个红色的 "FAIL" 标志，显示测试失败原因。
总结
在 React Native 中使用 Enzyme 与 Jest 进行 UI 测试非常简单，只需要在项目中安装它们，并编写相应的测试用例即可。通过这种方式，我们可以在开发过程中及时发现与解决问题，并保证应用程序的质量和可靠性。希望本文能够对读者们有所帮助，促进 React Native 的学习与应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ddc5bdf6b2d6eab3904668