在前端开发中，使用 React 和 Redux 是非常常见的。而在测试 React 组件时，Enzyme 也是一个极好的工具，它可以帮助我们进行单元测试和集成测试。但是，在测试 Redux 组件时，由于异步代码的存在，我们经常会遇到 async/await 问题。本文将介绍如何解决这个问题。
问题描述
在测试 Redux 组件时，我们通常会使用 enzyme 作为测试工具， 使用 enzyme 的 shallow 方法渲染组件并测试组件的 props。然而，当组件具有异步逻辑时，我们就会遇到问题。
例如，下面的组件接受了一个异步 action：
------ ----- ---- --------
------ - ------- - ---- --------------
------ --------- ---- -------------
------ - ---------- - ---- -------------------
----- ----- ------- --------------- -
------------------- -
----- - ---------- - - -----------
-------------
-
-------- -
----- - ----- - - -----------
------ -
-----
----
--------------- -- -
--- -------------------------------
---
-----
------
--
-
-
--------------- - -
----------- --------------------------
------ ------------------
-----------------
--- -----------------
------ -----------------
--
-------------
--
----- --------------- - ----- -- --
------ ------------------
---
------ ------- --------
----------------
- ---------- -
---------我们可以使用下面的测试代码来测试这个组件：
------ ----- ---- --------
------ - -------- - ---- --------------
------ - ------- - ---- ---------
------ ----- ---- -----------
------ - ----- - ---- --------------------
--------------- ----------- -- -- -
---------- ------ ----- ----- ---------- ----- -- -- -
----- ------- - --------
--------- --------------
------ --
-----------
--
----- -----------------------------------------
-----------------
-------------------------------------------
---
---在上面的代码中，我们使用 async/await 关键字来等待 fetchPosts 方法完成后再进行测试。
然而，当我运行这个测试时，我遇到了一个错误：
---------- -------------------------------- -- --- - --------
这是因为异步逻辑在 await 前已经结束， find 方法没有返回我们期望的函数。
解决方法
我们可以使用 unwrap 方法来解决这个问题。unwrap 方法可以将 enzyme 包装成的元素（即 shallow 或 mount 返回的对象）解包到其最终渲染的元素。这将返回一个 React 元素，而不是 enzyme 包装的对象。
我们可以找到我们想要的组件，调用 props() 方法以及需要的异步方法，然后使用 Promise.resolve() 将其包装在一个 Promise 中，并等待它在 expect 中完成。例如，我们可以这样修改测试代码：
------ ----- ---- --------
------ - -------- - ---- --------------
------ - ------- - ---- ---------
------ ----- ---- -----------
------ - ----- - ---- --------------------
--------------- ----------- -- -- -
---------- ------ ----- ----- ---------- ----- -- -- -
----- ------- - --------
--------- --------------
------ --
-----------
--
----- -----------------------------------------------------------------
-----------------
-------------------------------------------
---
---在代码中，我们使用 dive() 方法来进入包装元素并查找组件本身。然后使用 Promise.resolve() 包装 fetchPosts() 方法，并等待其完成。
总结
在测试 Redux 组件时，由于异步逻辑的存在，我们可能会遇到 async/await 问题。通过使用 unwrap() 和 Promise.resolve() 方法，我们可以解决这个问题。
值得注意的是，上面的方法并不意味着你应该在所有测试中使用 async/await。可以遵循只在必要时使用的原则，以避免代码中的不必要复杂性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/665174ebd3423812e4527767