在前端开发中，我们经常需要对各种场景进行测试，而 Jest 是一款出色的 JS 测试框架。在测试过程中，常常需要用到 Mock 测试技术，测试 fetch 请求也不例外。本文将为您介绍 Jest 测试中如何使用 fetch API，为您提供详细的指导和示例代码。
fetch API 简介
fetch API 是一个 Web API，它用于进行网络请求，并能返回 Promise 对象。它提供了一个简洁和灵活的接口，能够实现跨域请求和输出流。fetch API 常用于前端项目中的数据请求和页面渲染。
在 Jest 测试中，我们需要将实际的 fetch API 替换为 Mock 数据，以模拟网络请求环境并达到测试的目的。
Jest 中 Mock fetch API 模拟请求
在 Jest 中，我们可以使用 Global.fetch 来模拟请求。这是一个全局变量，预定义在 jsdom 环境中，它可以模拟许多行为，提供一个函数返回 Promise 来模拟 fetch API 的回调。
其中，我们需要指定这个函数需要的请求地址和返回对象，来直接进行数据 Mock。这是 Jest 测试中十分重要的一步，不仅能确保每次测试都可以正确运行，还能够快速地定位出现的问题。
示例代码：
-- -------------------- ---- ------- ------------ - ------------------------------- -- - --- --- - - --- ----- ----- -- -- ----------------- ----- ------ -- -- ------ --------------------- --- ------------ ----- ----- -- -- - ----------- ---------- ----- -- -- - ----- ---- - ----- -------------------------------------- ----- ------ - ----- ------------ ------------------------ ----- ------ --- --- ---展开代码
在上面的代码中，我们首先定义了一个 Mock 函数，用它来模拟 fetch 请求返回数据的情况。我们可以通过 jest.fn() 创建一个 Mock（模拟）实例，然后用它来模拟 fetch 方法。模拟成功的请求后，进行断言判断，确保请求的结果是否符合预期。
Jest Mock fetch API 更高级的使用
除了示例代码中的 Mock 外，我们还可以使用 Jest 中的 Mock 实例来模拟 fetch API 的更多行为，包括模拟网络请求失败、请求超时等。这样可以让我们对代码的运行情况有更深入的理解，在开发和测试中能够更为便利地定位和解决问题。
假设我们想要测试超时后请求的行为，可以使用以下 Mock 代码：
-- -------------------- ---- ------- ------------ - ------------------------------- -- - ------ --- ----------------- ------- -- - ------------- -- - --- --- - - --- ----- ----- -- -- ----------------- ----- ------ -- -- ------------- -- ------ --- --- ------------------ -- -- - -------------- ----- -- -- - ----- ---- - ----- ------------------------------------- - -------- ----- ------ - --- ----- ------ - ----- ------------ ------------------------ ----- ------ --- --- ---展开代码
在上面的代码中，首先我们定义了一个 3000ms 后返回结果的 Mock 过程。在断言时，我们通过 timeout 和 retry 两个参数来指定请求的超时时间和重试次数。如果运行结果符合预期，就会显示测试通过。反之则会显示错误。
总结
本文向您介绍了 Jest 测试中如何使用 fetch API，详细地介绍了 Mock 技术的重要性和使用方法，以及如何模拟网络请求失败、请求超时等情况，为您提供一定的思路和实践经验。这对于前端开发人员来说是非常有指导意义的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b9fac1add4f0e0ff28643f
