在 React Native 应用程序中使用 Enzyme 测试无状态组件
React Native 是一种基于 React 的框架，它使用 JavaScript 编写移动应用程序。React Native 的开发速度和效率高，但是测试却是一个棘手的问题。这时，一个称为 Enzyme 的测试库就能派上用场了。在本文中，我们将讨论如何在 React Native 应用程序中使用 Enzyme 测试无状态组件。
- 为什么要使用 Enzyme ？
Enzyme 是一个由 Airbnb 开源的 JavaScript 测试工具库，用于支持 React、React Native 和 Vue.js 组件的测试。它提供了易于使用的 API，可以让你轻松模拟 DOM 和组件交互。Enzyme 提供了三种渲染方式：浅渲染（Shallow rendering）、静态渲染（Static rendering）和完全渲染（Full rendering）。
在 React Native 中，Enzyme 是一个辅助工具，有助于我们更轻松地测试无状态组件。使用 Enzyme，我们可以测试组件的渲染结果，以确保其外观和可访问性符合预期。同时，Enzyme 还可以模拟用户的行为，测试组件在用户交互后的表现。
- 安装 Enzyme
安装 Enzyme 很容易，只需在命令行中执行以下命令：
npm i --save-dev enzyme enzyme-adapter-react-16
或
yarn add enzyme enzyme-adapter-react-16 -D
- 编写测试用例
在测试之前，我们需要编写测试文件。首先，我们需要创建一个名为 sum.js 的无状态组件，它将两个数相加：
-- -------------------- ---- -------
------ ----- ---- -------
------ - ----- ---- - ---- --------------
------ ------- -------- ----- -- - -- -
----- ------ - - - -
------ -
------
------------ -- ---------------
-------
-
-然后，我们创建一个名为 sum.test.js 的文件，以测试 sum.js 组件。Enzyme 测试分为三种类型：浅渲染、静态渲染和完全渲染。在此次测试中，我们将使用浅渲染。
-- -------------------- ---- -------
------ --------------
------ ----- ---- -------
------ --- ---- --------
-- --------- ------- ---- ------
------ - ------- - ---- --------
-- ---------- --- --- ------- -----
------------- ----------- -- -- -
---------- ------ --- -- --- ---------- -- -- -
----- ------- - ------------ ----- ----- ---
------------------------------------ -- ---------------------
--
--在测试代码中，我们首先从 Enzyme 中导入 shallow 方法，然后使用它来浅渲染组件。我们在测试用例中传递两个整数 1 和 2 给 Sum 组件，并期望输出的 Text 标签包含字符串 Result is 3。
- 运行测试
最后，我们可以运行 npm test 来执行测试。如果测试通过，则会在控制台中看到 PASS，如果测试失败，则会看到 FAIL。
在刚刚的测试中，所有测试都应该通过：
Sum Component ✓ should return sum of two integers (7ms)
- 总结
在本文中，我们介绍了 Enzyme、React Native 和无状态组件的概念，并展示了如何使用 Enzyme 测试 React Native 应用程序中的无状态组件。Enzyme 提供了三种渲染方式，分别是浅渲染、静态渲染和完全渲染。在本次测试中，我们使用了浅渲染来测试 React Native 应用程序中的无状态组件。如果你正在开发 React Native 应用程序并需要测试无状态组件，那么 Enzyme 就是一个不错的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a459bbadd4f0e0ffc9dfd2