背景
在前端开发中，我们经常需要使用 fetch API 来请求数据。但是在进行 Enzyme 测试时，使用 fetch API 会遇到一些问题，比如异步测试无法正确执行，请求时无法获取返回结果等。
问题分析
在 Enzyme 测试中使用 fetch API 出现问题的原因是，fetch API 是异步操作，而 Enzyme 中的测试都是同步进行的。所以需要使用一些特殊的技巧来解决这个问题。
解决方案
使用 async/await
使用 async/await 是解决异步操作的一种常见方式。当使用异步操作时，需要在函数前加上 async 关键字，并在需要等待异步操作完成的地方使用 await 关键字。这样就可以保证异步操作完成后再进行后续的操作。
以请求数据为例，下面是一个使用 async/await 实现的请求函数：
----- -------- -------------- - ----- -------- - ----- ----------- ----- ---- - ----- ---------------- ------ ----- -
在 Enzyme 测试中，我们可以直接将 async 函数作为回调函数传入测试函数中：
------------ ----- -- -- - ----- ---- - ----- ----------------------------------------- ---------------------------------- ---
使用 Promise
Promise 是异步编程中的另外一种解决方案，它可以处理异步操作的结果，可以让异步操作以同步的方式进行。使用 Promise 来请求数据，可以将请求数据的操作与测试代码分离，提高代码的可复用性。
以请求数据为例，下面是一个使用 Promise 实现的请求函数：
-------- -------------- -
------ --- ----------------- ------- -- -
----------
-------------- -- ----------------
---------- -- --------------
------------ -- ---------------
---
-在 Enzyme 测试中，我们可以使用 Promise.resolve() 来模拟异步操作的返回结果：
------------ -- -- -
------ -------------------------------------------------- -- -
----------------------------------
---
---总结
在 Enzyme 测试中使用 fetch API 会遇到一些问题，但通过使用 async/await 或 Promise，我们可以很容易地解决这些问题。同时，这些技巧也可以用于其他异步操作的测试中，提高测试代码的可复用性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6531dd497d4982a6eb3db4ff