在前端开发中，测试是不可或缺的一环。特别是对于涉及异步操作的组件，测试显得尤为重要。本文将介绍如何在 Enzyme + Jest 环境中测试异步组件，希望可以帮助读者更好地进行前端测试。
为什么要测试异步组件？
异步组件，如 React 中的 fetch、axios 等网络请求组件，或者使用 setTimeout、 setInterval、requestAnimationFrame 等实现的异步更新组件，这些组件的测试需要特别注意。
这是因为异步操作本身就具有不确定性，可能会因为网络延迟、服务器响应错误等外界因素而导致测试失败。如果不进行测试，就很难发现这些问题，导致最终产品质量不可控。
Jest + Enzyme 环境
Jest 是 Facebook 开源的一款测试框架，可以对 React 应用进行快速、高效、可靠的测试。Jest 除了可以进行单元测试和集成测试，还可以直接与 Enzyme 搭配使用进行组件测试。
Enzyme 是 Airbnb 开源的一款 React 组件的 JavaScript 测试工具，可以对 React 中的组件进行浅渲染、实例化渲染和完整渲染等各种方式的测试。
在 Jest + Enzyme 环境中，我们可以轻松实现对异步组件的测试。
测试异步组件
基本用法
首先，需要了解 Enzyme 的三种渲染方式：
- 浅渲染：只会渲染组件的一层，不会渲染子组件。并且返回一个 Enzyme 构造器。速度很快，通常用于执行一些组件单元测试或者检验一些生命周期函数、 props 和 state 等某些简单的条件是否符合预期。
- 真实渲染：用于完整渲染组件和组件子树。需要使用类似于
jsdom或者browser-env等 Node.js 环境的 dom 供全局使用。这种方式通常最慢、最准确，可用于测试组件的交互、动画等涉及事件、DOM 元素的行为。 - 完整渲染：渲染组件和所有子组件。并且返回一个包含页面所有内容的 HTML 代码字符串。通常可用于生成快照测试或者进行部分渲染的测试。
在测试异步组件时，我们通常会使用到完整渲染，以确保组件以及所有子组件都被正确渲染出来。下面是一个简单的完整渲染测试示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ --- ---- --------
--------------- -- -- -
----------- ------- ---- -- -
----- ------- - ---------- ----
------------- -- -
-----------------
--------------------------------------- -------
-------
-- -----
---
---在这个测试中，我们使用 Jest 的 describe 函数，传入应该被测试的模块的名字。这里是 App。然后使用 Jest 的 it 函数，描述这个测试应该做什么。这个测试应该渲染异步组件并等待 300ms 后检查是否渲染了数据 "Async data"。
mount 函数会渲染应用程序并返回一个 wrapper 对象，可以使用其 update 方法来完成更新。在一定时间后，使用 Jest 的 expect 函数检测 Wrapper 实例中是否包含了 "Async data"，如果包含则说明异步组件渲染成功。
在测试异步组件时，记得使用 Jest 提供的 done 参数来防止测试过早结束。当异步操作完成后，需要手动调用 done 函数来结束测试。
使用 promises 风格
异步测试之所以麻烦，主要是因为写法与同步测试有很大的不同。在 Jest 中提供了 async/await 语法糖来优化异步测试，并且可以使用 Promises 风格完成异步测试。示例代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ --- ---- --------
--------------- -- -- -
----------- ------- -- -- -
---------------------
----- ------- - ---------- ----
------ -------
--------------------------------------------------------
-------- -- -
--------------------------------------- -------
---
---
---相比之前的写法，这种写法更加清晰简洁，使用 expect.assertions 来确保在测试中至少使用了一个 expect 语句。
在测试 App 组件时，使用 mount 函数渲染组件，并等待异步组件加载完成。这里可以通过 find 函数找到异步组件的选择器，然后使用 Promise 风格的写法来保证异步操作全部完成后再进行数据检验。
使用 mock 函数
在进行异步组件测试时，由于网络请求等外部因素的影响，导致测试不好控制。这时候可以使用 Jest 自带的 mock 函数，将异步方法模拟成同步方法，便于测试。
下面是一个使用模拟 Jest mock 函数测试异步组件的示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ --- ---- --------
------ ----- ---- --------
------------------ -- -- --
---- ---------- -- ----------------- ----- ------ ----- ---
----
--------------- -- -- -
----------- ------- -- -- -
----- ------- - ---------- ----
------ ------------------------------ -- -
-----------------
--------------------------------------- -------
---
---
---在这个测试中，我们使用 jest.mock 函数，将 axios.get 方法替换为 mock 函数，并将其返回结果定义为 "Async data"。
在测试中，启用异步方式编写测试，并在测试完成后更新渲染。然后使用 Jest 的 expect 验证是否包含 "Async data"。
使用 Jest 的 mock 函数，可以确保在不同环境下，返回结果都是一样的，从而保证测试正确性。
总结
本文主要介绍了如何在 Enzyme + Jest 环境中测试异步组件。针对异步操作的不确定性，我们可以使用完整渲染、Promise 风格、mock 函数等方式实现异步测试，并保证测试正确性。在实际测试中，需要结合项目特点，选择适合的测试方式，才能更好地进行前端测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647f236148841e9894ed41dc