在前端开发中，我们经常需要使用 fetch API 来进行网络请求。当我们要对使用了 fetch API 的组件进行单元测试时，需要模拟 fetch API 的行为，以保证测试的准确性和完整性。本篇文章将介绍如何使用 Enzyme 和 Jest 来模拟 fetch API。
Enzyme 简介
Enzyme 是 React 生态中的一个测试实用程序，可以帮助我们对 React 组件进行单元测试和集成测试。它提供了一系列工具，可以方便地操作 React 组件，例如渲染、断言输出结果等。
Jest 简介
Jest 是 Facebook 开发的一款 JavaScript 测试框架，被广泛应用于 React 生态中的单元测试和集成测试。它支持自动化和手动测试，提供了丰富的断言函数和测试生命周期，使用起来简单方便。
模拟 fetch API 的方法
在测试 React 组件时，我们通常需要模拟网络请求的行为，以确保组件的正确性和稳定性。下面是两种常见的模拟 fetch API 的方法。
使用 jest.mock
我们可以使用 Jest 提供的 jest.mock 函数来模拟 fetch API。该函数可以自动替换指定模块中的导出对象，达到模拟的目的。以下是一个使用 jest.mock 来模拟 fetch API 的示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ----- ---- ----------- ----- -- -- -
----- ------------ - - ---- ----- --
----- --------------- - ------------------------------
----- ---------------- - -----------------
----- -- -- ----------------
---
------------------ ------------------------------ -- ------------------
----- ------- - ------------------ ----
-------------------------------------------------
----- -----------------
----------------------------------------------
---------------------------------------------------------------------------
---------------------------
---
---在这个示例中，我们使用了 Jest 提供的 spyOn 函数来监听全局的 fetch 函数，并将其替换为我们自己定义的假函数。在 mockImplementation 函数中，我们返回了一个实现了 json 返回值的假 promise 对象，以模拟 fetch 请求返回的结果。在测试代码中，我们可以通过断言组件的渲染结果来验证我们的模拟。
使用 fetch-mock
除了使用 Jest 内置的 mock 函数外，我们也可以使用 fetch-mock 这个库来模拟 fetch API。该库可以让我们更方便地模拟网络请求的行为，支持各种复杂的场景和定制化需求。
以下是一个使用 fetch-mock 来模拟 fetch API 的示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ --------- ---- -------------
------ ----------- ---- ----------------
----------------------- -- -- -
------------ -- -
--------------------
---
---------- ----- ---- ----------- ----- -- -- -
----- ------------ - - ---- ----- --
--------------------------- --------------
----- ------- - ------------------ ----
-------------------------------------------------
----- ------------------
---------------------------------------------------------------------------
---
---在这个示例中，我们使用了 fetch-mock 提供的 mock 函数来模拟网络请求。我们将请求地址设为 /api/data，并将返回值设为一个简单的对象。在测试代码中，我们断言组件的渲染结果，验证我们的模拟。
总结
在使用 Enzyme 进行组件测试时，我们通常需要模拟 fetch API 的行为，以确保组件的正确性和稳定性。本篇文章介绍了两种常见的模拟 fetch API 的方法：使用 Jest 的 jest.mock 来替换全局的 fetch 函数，或使用 fetch-mock 库来模拟网络请求。无论使用哪种方法，我们都可以处理各种复杂的场景和定制化需求，以满足测试的要求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/653829897d4982a6eb0d0374