前言
React Native 是一种流行的移动应用程序框架，开发人员可以使用 JavaScript 和 React 来编写原生应用程序。Enzyme 是一个流行的 React 测试工具，可以轻松地模拟 React 组件的交互和状态，以帮助开发人员编写更好的测试代码。本文将介绍如何在 React Native 应用程序中使用 Enzyme 进行网络请求测试。
前置知识要求
本文为 React Native 和 Enzyme 技术文章，建议读者有相关领域的基本知识。
下载 Enzyme
下载 Enzyme 的最简单方法是通过 npm 包管理器进行安装。在命令行中，键入以下命令：
npm install --save-dev enzyme
网络请求测试
在 React Native 应用中，网络请求通常使用 Fetch API 或 axios 来实现。我们可以通过测试组件的 prop，来确保网络请求被正确地触发。
在接下来的示例中，我们将创建一个 React 组件，它将触发一个网络请求并更新组件的状态。我们可以使用 Enzyme 来测试网络请求的成功和失败。
首先，让我们考虑以下组件代码：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ----- ---- --------
------ --------- ---- -------------
----- ----------- ------- --------- -
------------------ -
-------------
---------- - -
----- -----
------ ----
--
-
------------------- -
-------------------------
-------------- -- -
--------------- ----- ------------- ---
--
------------ -- -
--------------- ------ ------------- ---
---
-
-------- -
-- ------------------ -
------ ------------------------------
-
-- ------------------ -
------ ---------------------
-
------ -
----
------------------------- -- -
--- --------------
------------
-----
---
-----
--
-
-
--------------------- - -
---- ---------------------------
--
------ ------- ------------可以看到 MyComponent 封装了一个网络请求方法，并在该组件渲染后即请求数据。
我们将需要下载安装 axios 和 configureEnzyme 函数 (用于设置 Enzyme Matchers)。
npm i axios npm i enzyme enzyme-adapter-react-16
创建 /jest/setup.js 文件:
import { configure } from 'enzyme';
import EnzymeAdapter from 'enzyme-adapter-react-16';
configure({ adapter: new EnzymeAdapter() });修改 package.json 新增以下代码段
"jest": {
"preset": "react-native",
"setupFiles": [
"./jest/setup.js"
]
}创建 MyComponent.test.js 文件，并在其内部编写测试代码
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- ---- --------
------ - ----- - ---- ---------
------ ----------- ---- -----------------
-------------------
----------------------- -- -- -
------------ -- -
---------------------
---
------------------- -- -- -
---------- ------ ------- ----- ----------- -- -- -
----- ------------- - ------------------ ---------------------- ----
----- ---- - ---------------------
----------------------------------
---
---------- ------ ----- ----- ---- ------- ------- -- -- -
----- ------------ - -------- -------
----------------------------- -------- ------------ ---
----- ------------- - ------------------ ---------------------- ----
----- ---- - ---------------------
-----------------------------------
---
---------- ------ ----- ---- ------- ---------- ----- -- -- -
----- ---- - -
- --- -- ------ ----- -- --
- --- -- ------ ----- -- --
- --- -- ------ ----- -- --
- --- -- ------ ----- -- --
- --- -- ------ ----- -- --
--
----------------------------- ---- ---
----- ------------- - ------------------ ---------------------- ----
----- --- --------------- -- ---------------------
----- ---- - ---------------------
-------------------------- ----- ----- ----- ----- ----
---
---
---在 MyComponent.test.js 文件中，我们使用 mount() 方法渲染 MyComponent，这样我们可以通过 props 来传递 url 以配合网络请求。
为了测试组件加载状态，我们在其挂载后判断其是否渲染「Loading……」文本。
为了测试网络请求失败场景，我们将 mock axios，并使用 mockRejectedValue 来模拟网络请求失败情况。这样我们在尝试渲染该组件时，可以检查 error state 是否正确展示出来。
对于网络请求成功的测试，我们将自动模拟一个数据列表作为响应，并在组件渲染完成后检查内容是否符合此数据列表的预期。
最后，我们使用 jest.clearAllMocks() 来重置所有异步操作和 mock 函数，在每个测试之间保持独立性。
结论
在本文中，我们了解了如何使用 Enzyme 在 React Native 应用中测试网络请求。我们通过在组件内部注入 axios 来模拟网络请求，并使用 Enzyme 的 mount() 方法渲染组件，以检查其正确渲染、 error 和 success 状态是否正常展示。
在测试 React Native 应用程序时，请确保使用 Enzyme 等工具，以确保代码质量和可靠性。测试可以帮助您发现问题和隐式问题，提高代码的鲁棒性和可理解性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f65ed5c5c563ced584144e