在 React 中，懒加载（lazy loading）是一项非常有用的功能。通过使用 lazy() 函数，我们可以在需要时动态加载组件，这可以帮助我们优化应用程序的性能。
但是，懒加载组件的测试则比较特殊。在测试这种具有懒加载的组件时，我们需要考虑加载组件的时间，确保测试的正确性。在本篇文章中，我们将学习如何使用 Enzyme 测试具有 lazy() 懒加载的 React 组件。
安装和设置
在开始之前，我们需要安装和设置 Enzyme 和 React。首先，确保你在项目中已经安装了 Enzyme：
npm install --save-dev enzyme enzyme-adapter-react-16
接着，我们要设置 Enzyme。在项目的根目录下创建一个 setupTests.js 文件，并在其中添加以下代码：
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });这将为我们启用 Enzyme，以及选择 React 16 的适配器。
测试懒加载组件
现在，我们可以开始编写测试用例了。对于具有 lazy() 懒加载的组件，我们需要两个测试用例：一个测试应该在加载组件时，在应用程序里渲染正确的内容。另一个测试应该在组件没有加载时，返回一个占位符。
让我们开始编写测试。我们将使用一个虚拟组件作为例子：
-- -------------------- ---- -------
------ ------ - ----- -------- - ---- --------
----- ------------- - ------- -- ---------------------------
-------- ----- -
------ -
---- ----------------
--------- ---------------------------------
-------------- --
-----------
------
--
-
------ ------- ----首先，我们需要编写一个测试用例来测试组件在加载完成后是否能够正确渲染。该测试用例应该存储在 App.test.js 文件中。
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- ----- - ---- ---------
------ --- ---- --------
--------------- -- -- -
------------ ------ ---- ----------- -- -- -
----- ------- - ---------- ----
--------------------------------------------
---
---这个测试用例使用 mount() 方法在 DOM 中渲染 App 组件，并使用 find() 方法查找 div 元素。我们期望只找到一个 div 元素，因为在 App 组件中只有一个 div 元素。
接下来，我们将编写测试用例来测试当组件没有加载时，是否正确返回一个占位符。该测试用例应该像这样：
describe('App', () => {
test('should show placeholder while loading', () => {
const wrapper = shallow(<App />);
expect(wrapper.find('div')).toHaveLength(1);
});
});这个测试用例使用 shallow() 方法进行浅层渲染，以确保只检查呈现的占位符，而不需要进行完全的渲染。通过查找 div 元素，我们可以确保当 App 组件中没有其他内容时，只会呈现一个占位符。
结论
我们已经成功地用 Enzyme 编写了测试用例来测试具有懒加载的 React 组件，同时排除了加在组件时的时间影响。希望本篇文章能够帮助你编写测试用例，确保你的组件在所有情况下都能正常运行。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f74751c5c563ced59372b7