React Native 是一个用 JavaScript 构建跨平台应用的框架，它的 UI 组件需要进行测试以确保它们符合预期。
Enzyme 是一个测试 React 组件的 JavaScript 库。它提供了一些方便的 API 来测试组件的输出和行为。而且，它也可以用来测试 React Native 的组件。
在本教程中，我们将详细介绍如何利用 Enzyme 测试 React Native UI 组件。
准备工作
在开始之前，你需要安装以下工具：
- Node.js
- npm
- react-native-cli
你还需要创建一个新的 React Native 项目。你可以使用 Expo CLI 或 react-native CLI 来创建它。
安装 Enzyme
要在 React Native 项目中使用 Enzyme，我们需要先安装 enzyme、enzyme-adapter-react-16 和 react-test-renderer。
你可以使用 npm 在你的项目目录下安装它们：
npm install enzyme enzyme-adapter-react-16 react-test-renderer --save-dev
配置 Enzyme
在使用 Enzyme 之前，我们需要先配置它。为此，我们需要在项目中创建一个名为 setupTests.js 的文件。该文件将是我们的 Enzyme 配置文件。
在该文件中，我们需要导入 enzyme、enzyme-adapter-react-16 和 react-test-renderer。
-- -------------------- ---- ------- ------ - --------- - ---- --------- ------ ------- ---- -------------------------- ------ - ------------- - ---- --------------- ----------- -------- --- --------- --- -- ------- ------ -------- ---------------------------- - - --------------- ---------- --
然后我们还需要设置一个必要的全局变量，它将使我们的测试更容易进行。
请将以下代码添加到项目中的 package.json 中。
{
"jest": {
"preset": "react-native",
"setupFilesAfterEnv": ["./setupTests.js"]
},
}配置完成后，你可以使用 Enzyme 了。
编写测试用例
让我们假设我们要测试一个名为 Button 的组件。
组件来自 src/components/Button.js 文件。实现如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- ----------------- ---- - ---- ---------------
------ ------- -------- -------- ------ ------- -- -
------ -
----------------- --------------------- ------------------
----- -----------------------------------
-------------------
--
-
----- ------ - -------------------
------- -
---------------- ----------
-------- ---
------------- --
--
------ -
------ -------
---------- ---------
--------- ---
--
---我们将创建以下两个测试用例：
- 测试组件输出。
- 测试组件行为（触摸事件）。
测试组件输出
要测试组件输出，我们可以使用 react-test-renderer。它会渲染组件并返回一个 snapshot。我们可以将快照与预期快照进行比较。
我们可以在 src/components/__tests__/Button-test.js 文件中编写第一个测试用例。
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ---- - ---- --------------- ------ -------- ---- ---------------------- ------ ------ ---- ------------ ------------- ----------- -- -- - ----- ---- - ----------------------- ---------- ----------- -- --- ------------- ------------------------------- ---
该测试用例将渲染 Button 组件，并将其快照与预期快照进行比较。如果两者相同，测试就会通过。
测试组件行为
要测试组件行为，例如按钮的按下事件，我们可以使用 enzyme。我们将模拟按下事件并检查产生的结果。
我们可以在 src/components/__tests__/Button-test.js 文件中编写第二个测试用例。
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ---- - ---- --------------- ------ - ------- - ---- --------- ------ ------ ---- ------------ --------------- -- -- - ----- ------ - ---------- ----- ------- - --------------- ---------- ---------------- ---- --------------------------------------------------- ---------------------------------- ---
该测试用例创建了一个包含点击事件处理函数的 Button 组件。然后它使用 shallow 模拟渲染该组件并找到 TouchableOpacity 组件，并模拟向其发送 press 事件。最后，它检查 mockFn 函数是否已被调用。
结论
本教程介绍了如何使用 Enzyme 来测试 React Native UI 组件。我们学习了如何安装并配置它，如何编写测试用例以及如何使用 react-test-renderer 和 enzyme 来测试组件输出和行为。
通过使用这些工具，我们可以更轻松地编写高质量的 React Native 应用程序。希望你会喜欢这个教程！请随时在评论区留言，分享你的问题或建议。
示例代码：https://gist.github.com/liyingyuan/8219488f0c157012fab5d5f9d5f1cb5b
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674476ccc1a23897ea772810