概述
React Native 是一种跨平台应用程序开发框架，它使开发人员能够使用 JavaScript 构建移动应用程序。Enzyme 是 React 的一个用于测试的 JavaScript 库，它可以帮助我们对 React 应用程序进行完整的 UI 测试。在本文中，我们将学习如何在 React Native 应用程序中使用 Enzyme 进行 UI 测试。我们将：
- 安装必要的软件和库
- 编写测试代码
- 运行测试
安装必要的软件和库
在开始测试之前，我们需要安装一些必要的软件和库。我们将使用 Jest 来运行测试，并使用 Enzyme 来编写测试代码。我们还需要安装一些与 React Native 相关的软件和库。
首先，我们可以通过运行以下命令在我们的 React Native 项目中安装 Enzyme：
npm install --save-dev enzyme react-test-renderer
下一步是安装 Jest：
npm install --save-dev jest babel-jest
在继续之前，我们需要在项目根目录中创建一个 babel.config.js文件，并添加以下内容：
module.exports = {
presets: ['module:metro-react-native-babel-preset']
};然后，将我们的 package.json 文件中的 "test" 配置更改为以下内容：
"test": "jest"
编写测试代码
现在我们已经安装了必要的软件和库，我们可以开始编写测试代码了。我们将从创建一个简单的组件开始，然后编写一个测试来确保它呈现正确。
首先，在我们的 React Native 项目中，我们将创建一个名为 MyComponent.js 的新文件，并将以下内容添加到该文件中：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ---- - ---- ---------------
----- ----------- - -- -- -
------
-------- ----------------
-------
--
------ ------- ------------这个组件非常简单，它只是呈现一个包含文本的视图。
接下来，我们将在我们的项目中创建一个名为 MyComponent.test.js 的新文件，并将以下内容添加到该文件中：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
---------------------- ---- -- -- -
---------- ------ ----------- -- -- -
----- ------- - -------------------- ----
----------------------------------
---
---这里我们首先导入 React 和 shallow 函数从 Enzyme 中。我们然后导入我们要测试的组件 MyComponent。我们使用 describe 函数来描述我们的测试用例，并在一个简单的 it 函数中编写我们的测试。
在这个测试中，我们使用 shallow 函数来创建一个浅层渲染，然后使用 expect 函数来测试这个渲染结果是否匹配测试快照。测试快照是一个简单的方式来测试我们的组件是否始终以相同的方式呈现。如果组件的呈现方式发生了变化，我们将看到测试失败。
运行测试
现在我们已经编写了我们的测试代码，我们可以运行测试了。我们可以运行以下命令来启动 Jest 测试运行器：
npm test
当我们运行这个命令时，Jest 将检测我们的 MyComponent.test.js 文件，运行测试，并输出测试结果。
如果我们在 MyComponent 中进行了更改，例如更改呈现的文本，我们将看到测试失败，因为我们的测试快照不再匹配。
结论
在本文中，我们学习了如何在 React Native 应用程序中使用 Enzyme 进行 UI 测试。我们首先安装了必要的软件和库，然后创建了一个简单的组件和相应的测试代码。最后，我们使用 Jest 运行测试，并确保我们的测试快照匹配我们的组件呈现方式。
通过编写测试代码并定期运行测试，我们可以确保我们的应用程序始终按预期的方式呈现，并减少引入错误的可能性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67372416317fbffedf085f4f