前言
Jest 是一个测试库，它可以让我们很好地测试我们的 JavaScript 代码。测试时，有时我们需要模拟一些异步操作，如 HTTP 请求。而在测试这些操作时，我们最好不要用真正的网络请求，因为这样会增加测试持续时间、将测试从构建环境分离、对网络的依赖等原因。因此，我们使用 fetch Mock 库来模拟 HTTP 请求 / 响应。在这篇文章中，我们将从头开始学习如何使用 Jest 和 fetch Mock 进行异步测试。
安装 Jest 和 fetch Mock
首先，我们需要安装 Jest 和 fetch Mock：
npm install jest fetch-mock --save-dev
或
yarn add jest fetch-mock --dev
使用 fetch Mock
让我们看一下如何在 Jest 中使用 fetch Mock。假设我们的应用程序有一个获取数据并显示数据的功能。我们假设我们的“getData”方法是异步的，因此我们需要测试它。我们可以使用 fetch Mock 来模拟 HTTP 请求 / 响应。
-- -------------------- ---- -------
------ --------- ---- -------------
------ - ------- - ---- ----------
------------- ------- ------ -- -- -
--------------------------------------------- - ----- ------- ----- ---
------ ------------------- -- -
---------------------- ----- ------- ----- ---
---
---在上面的代码中，我们首先使用 “fetchMock.get” 方法来模拟一个 GET 请求并返回一个将被我们的应用程序视为先前成功的响应。接下来，我们调用 “getData” 方法，并使用 “then” 块来测试返回的数据是否与我们预期的数据匹配。
使用 Jest Mocks
那么，上述代码是否完美无缺呢？并非如此。上面的测试需要真正的 HTTP 请求，因此速度较慢。另外，如果我们更改了测试数据，我们还需要更改我们的测试代码。
为了解决这两个问题，我们可以使用 Jest Mocks。Jest 提供了两种类型的 Mocks：手动 Mocks 和自动 Mocks。手动 Mocks 通常用于自定义和故障注入。自动 Mocks 在测试时自动生成它们自己的 Mocks。
首先，让我们使用 Jest Mocks 重构上面的测试：
-- -------------------- ---- -------
------ - ------- - ---- ----------
------------------------
------------- ------- ------ -- -- -
----- ---- - - ----- ------- ----- --
----- -------- - - ----- -- -- --------------------- --
----- ----- - ----------------------
----------------------------------
------ ------------------- -- -
---------------------- ----- ------- ----- ---
---
---在上面的代码中，我们首先创建一个返回所需数据的 Response 对象。接下来，我们模拟 “node-fetch” 库并使用 “fetch.mockResolvedValue” 方法模拟 HTTP 响应。最后，我们调用 “getData” 方法并测试返回的数据是否与我们预期的数据匹配。
这种方法速度更快，因为我们的测试用例不再需要真正的 HTTP 请求。如果我们更新我们的测试数据，我们只需要更新我们的 Mock 而不是我们的测试用例。
总结
在本文中，我们学习了如何在 Jest 中使用 fetch Mock 进行异步测试。我们首先了解了为什么需要使用 fetch Mock，然后介绍了如何安装 Jest 和 fetch Mock。接下来，我们编写了一个测试方法来测试我们的异步代码并模拟了 HTTP 请求 / 响应。最后，我们使用 Jest Mocks 重构了我们的测试方法，并讨论了自动和手动 Mocks。
这些知识对于编写更好的测试非常有用。这也可以帮助我们在开发过程中更好地控制我们的代码，并减少对第三方服务的依赖。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647707e1968c7c53b039a448