Enzyme 是什么
Enzyme 是 React 的一个 JavaScript 测试工具，由 Airbnb 开源。它提供了一种简单的测试 React 组件渲染、交互和状态更改的方法。Enzyme 能够让我们轻松地模拟、操作和遍历 React 组件树，使得测试 React 组件变得简单而容易。
React.lazy()
React.lazy() 是 React 16.6 新增的 API，可以让开发者使用动态导入的方式去加载组件。React.lazy() 可以实现按需加载，避免项目初期就加载所有依赖的组件，提高页面加载速度和性能。
如何测试被 React.lazy() 包裹的组件
测试被 React.lazy() 包裹的组件并不像测试普通组件那样简单，需要做一些额外的工作。下面是一些步骤：
1. 引入 React.lazy() 组件
首先，需要引入被 React.lazy() 包裹的组件。这个过程需要使用 React 的 lazy 函数，并在其返回结果上调用 .then() 方法加载组件，例如：
----- ------- - ------------- -- -----------------
2. 使用 React.Suspense 包裹组件
在测试时，需要使用 React.Suspense 包裹组件。React.Suspense 可以用来等待异步组件加载完成并在等待时显示一个 UI。例如：
----- ------- - --------
--------------- ---------------------------------
-------- --
-----------------
--3. 测试异步组件的位置
在测试异步组件时，需要使用 timeout（超时时间） 参数确定测试组件的位置。模拟异步加载的时候，需要让测试代码等待一段时间，超出这个时间就会抛出一个错误。例如：
-- ---- ---- ---- --- --------- ------- ----- -- --- ------ ------------- -- - -------------------------------------------- -- ------ -- ------- --- -- --- -------
4. 安装 react-test-renderer
react-test-renderer 是一个 React 渲染器，可以使我们在 Node.js 中测试 React 组件的渲染结果。我们需要在项目中安装该模块：
--- ------- ------------------- ----------
5. 测试异步组件的快照
最后，可以使用 react-test-renderer 的 .create() 方法去测试异步组件的快照。例如：
----- ---- - ----------------
--------------- ---------------------------------
-------- --
-----------------
--
----------------------------------------示例代码
下面是一个完整的测试被 React.lazy() 包裹的组件的示例代码：
------ ----- ---- --------
------ -------- ---- ----------------------
------ - ------- - ---- ---------
----- ------- - ------------- -- -----------------
----- ----- - -- -- -
----- ------- - --------
--------------- ---------------------------------
-------- --
-----------------
--
------ -
-------
--
--
--------------- -- -- -
----------- ------- ---------- -- -- -
---------------------------
---
----------- --- --------- ----- --------- -- -- -
----- - ------- - - --------
------------- -- -
--------------------------------------------
-- ------ -- ------- --- -- --- -------
---
----------- --- ---------- -- -- -
----- ---- - ----------------
--------------- ---------------------------------
-------- --
-----------------
--
----------------------------------------
---
---总结
在测试被 React.lazy() 包裹的组件时，我们需要引入 React.lazy() 组件、使用 React.Suspense 包裹组件、测试异步组件的位置、安装 react-test-renderer 和测试异步组件的快照。这些步骤可以使我们测试被 React.lazy() 包裹的组件变得更加容易和简单。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/648189db48841e9894103591