测试是保证代码质量的重要手段之一，以 React 为例，在前端开发中，测试组件和功能的正确性是必不可少的。而在测试中，HTTP 请求也是经常涉及到的一个点。
在 Jest 中如何模拟 fetch 去测试 HTTP 请求？在这篇文章中，我们将会详细讲解如何使用 Jest 和 jest-fetch-mock package 来实现 mock fetch 请求。
Jest & jest-fetch-mock package
Jest 是 Facebook 开源的 JavaScript 测试框架，它可以在 Node.js 环境中运行，也支持运行在浏览器上。同时，Jest 提供了一系列 API 和工具来辅助开发者完成测试工作。
而当我们需要模拟 HTTP 请求时，可以通过 jest-fetch-mock package 来实现。jest-fetch-mock package 是一个 Jest 的 mock fetch 实现，它通过提供封装好的响应 API，来完成 fake 数据的响应。
接下来我们将通过代码示例来讲解如何运用 jest-fetch-mock package 来实现 mock fetch 请求。
代码示例
下面的代码示例中，我们将以一个简单的 React App 为例来讲解如何 使用 jest-fetch-mock package 来完成 mock fetch 请求。以下为一个名为 App.js 的组件：
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
------ ------- -------- ----- -
----- ------ -------- - ---------------
----- ------- --------- - ---------------
------------ -- -
------------
-- ----
----- -------- ----------- -
--- -
----- -------- - ----- -------------------
----- ---- - ----- ----------------
--------------
- ----- ----- -
--------------
-
-
-- ------- -
------ ----------- ----------------------
- ---- -- ------- -
------ ----------------------
- ---- -
------ -
-----
------- --------------
-------------------------
------
--
-
-在上面这个组件中，我们通过 fetchData 函数来调取后端数据。我们希望在测试中模拟 fetch 请求，来完成对 fetchData 函数的测试。以下是我们的测试文件（test/App.test.js）：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- ------ - ---- -------------------------
------ --- ---- ---------
------ - --------- - ---- ------------------
------------ -- -
------------------------
---
----------- -- -
----------------------
-------------------------
---
------------- ----------- -- -- -
--------------------- -- -- -
------------ --- ---- ----- ----- --------- ---------- ----- -- -- -
------------------------------------------- -------- ------- ----
----------- ----
-----------------------------------------------------------
------------ ---------------------- ---------------------------------
------------ ------------------------------------------------
---
------------ --- ----- ----- ----- --------- ------- ----- -- -- -
----- ------------ - ------ --------- ---- --------
---------------------------- ---------------------
----------- ----
-----------------------------------------------------------
------------ ------------------------- ---------------------------------------
---
---
---在上面的代码示例中，我们首先通过 import 引入了 jest-fetch-mock 中的 fetchMock 函数。接着，我们在测试文件的beforeAll部分，调用了 fetchMock.enableMocks 函数，用来启动 mock fetch 请求。在测试结束后，我们在afterAll部分使用 fetchMock.mockClear 函数来清空 mock 数据。
在上面的代码示例中，我们完成了对 fetchData 函数的两个测试。在第一个测试中，我们模拟了 fetchData 请求成功的场景。我们通过 fetchMock.mockResponseOnce 函数来 mock fetch 的响应数据，并在 render 函数中引用了 App 组件。在测试过程中，我们分别使用 screen.getByText 和 await screen.findByText 两个函数，来获取渲染出来的文本元素。最后，我们使用 expect 验证数据是否显示正确。
在第二个测试中，我们模拟了 fetchData 请求失败的场景。与第一个测试类似，我们使用了 fetchMock.mockRejectOnce 函数来模拟 fetch 请求失败，并使用 screen.getByText 和 await screen.findByText 两个函数来验证是否渲染了正确的错误信息。
总结
通过以上的代码示例，我们对于如何使用 jest-fetch-mock package 在 Jest 中模拟 fetch 请求有了一定的了解。在实际开发中，我们可以根据应用场景，选择不同的 mock 数据。同时，我们也应该关注其他测试相关的知识点，来保证应用的健康和稳定。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6656f744d3423812e4c0b30a