在使用 Jest 测试 JavaScript 应用程序时如何处理外部API？
在编写前端应用程序时，我们经常需要依赖于外部API。外部API提供了我们需要的数据和功能，但在编写测试用例时，我们需要考虑如何模拟这些API。在这篇文章中，我将详细介绍在使用 Jest 测试 JavaScript 应用程序时如何处理外部API问题。
为什么需要模拟API？
在编写测试用例时，我们需要保证测试的可靠性和稳定性。如果我们需要从真实的API获取数据或者执行一些操作，那么测试就会变得不稳定，因为我们无法控制外部API的稳定性和可用性。另外，如果测试需要一些特定的数据或状态，我们则需要手动准备这些数据或状态，而模拟API则可以帮助我们更有效地进行这些操作。
使用 Jest 原生方法来模拟 API
在 Jest 中，我们可以使用 jest.mock() 方法来模拟外部 API。jest.mock() 方法接受两个参数，第一个参数是需要模拟的模块的路径，第二个参数是一个可选的模拟实现。我们通过提供一个自定义的的模拟实现来替代原来的 API 实现，从而在测试中使用。
下面是一个使用 Jest 模拟 API 的示例：
-- -------------------- ---- -------
-- ------
------ ----- ------- - ----- -- -- -
----- -------- - ----- --------------------------------------
----- ---- - ----- ----------------
------ -----
--
-- -----------
------ - ------- - ---- --------
------------ ------ --- ------ ------ ----- -- -- -
----- -------- - - -------- -------- ----- --
------------ - ------------------------------- --
-----------------
----- -- -- --------------------------
--
--
----- ------ - ----- ----------
---------------------------------
---在上面的示例中，我们模拟了 getData() 方法中的外部API fetch() 请求。我们通过 jest.fn() 方法模拟 fetch() 方法的调用，并将其实现为返回一个带有 json() 方法的 Promise 对象，在测试中使用。
使用第三方库来模拟API
除了使用 Jest 原生方法外，还可以使用一些第三方库来模拟API的行为。比如，在 React 项目中，可以使用 msw 模拟网络请求。msw 不需要修改任何现有的API调用代码，而是在网络层拦截请求并提供自定义的响应。另外，msw 还可以创建完整的REST API，即使服务器尚未准备好启动。
下面是一个使用 msw 模拟 API 的示例：
-- -------------------- ---- -------
-- ------
------ ----- ------- - ----- -- -- -
----- -------- - ----- --------------------------------------
----- ---- - ----- ----------------
------ -----
--
-- -----------
------ - ---- - ---- ------
------ - ----------- - ---- -----------
------ - ------- - ---- --------
----- ------ - ------------
---------------------------------------- ----- ---- ---- -- -
------ -------------- -------- -------- ----- ----
--
--
------------ -- -----------------
----------- -- ----------------
------------ ------ --- ------ ------ ----- -- -- -
----- ------ - ----- ----------
------------------------ -------- -------- ----- ---
---在上面的示例中，我们使用 msw 创建一个虚拟服务器，并使用 rest.get() 方法模拟了我们需要的API响应。getData() 方法在测试中调用，而不需要考虑外部API是如何被处理的。
总结
在测试前端应用程序时，模拟外部API是一项重要的任务。我们需要模拟API来减少对外部资源的依赖，并增加测试的可靠性和稳定性。在 Jest 中，使用 jest.mock() 方法是一个常见的方法来模拟API。而在 React 项目中，msw 则是一个非常有用的库，可以在网络层拦截请求并提供自定义响应，而无需修改现有的API调用代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6542180f7d4982a6ebbbe204