如果你在开发 React 组件的过程中，使用了 Enzyme 来进行测试，那么你可能会遇到一个问题：当你测试一个渲染了大量元素的组件的时候，Enzyme 的渲染速度会变得非常慢，甚至会导致测试超时或者卡死。
这篇文章将会介绍一些可以解决这个问题的方法。
问题的根源
首先，我们需要了解问题的根源是什么。
当使用 Enzyme 进行测试的时候，Enzyme 实际上是通过模拟 DOM 来进行渲染和测试的。因此，当你测试一个渲染了大量元素的组件的时候，Enzyme 需要模拟的 DOM 元素也会变得非常多，这会导致测试速度变慢。
而且，在测试中，React 实际上还会触发一些不必要的渲染。例如，在使用 wrapper.find() 时，React 实际上会重新渲染组件来查找相应的元素。这也会导致测试速度变慢。
解决方法
使用 .shallow() 而不是 .mount()
Enzyme 提供了两种渲染方法：.shallow() 和 .mount()。.mount() 会完整地渲染组件及其子组件，而 .shallow() 只会渲染组件本身。
因此，当你测试一个渲染了大量元素的组件时，最好使用 .shallow() 而不是 .mount()，这样可以减少 Enzyme 需要模拟的 DOM 元素数量。
例如，考虑下面这个简单的组件：
-- -------------------- ---- -------
-------- ----------- -
----- ---- - ------------ ------- ---- -- --- -- -- - - ---
------ -
-----
------------- -- -
------------------
---
------
--
-这个组件渲染了 1000 个 <span> 元素。如果使用 .mount() 来进行测试，那么测试速度会非常慢。但是如果使用 .shallow() 来进行测试，测试速度就会快很多。
const wrapper = shallow(<Component />);
使用 .findWhere() 而不是 .find()
如前所述，React 在使用 .find() 时会重新渲染整个组件树，这会导致测试速度变慢。但是，Enzyme 还有一个 .findWhere() 方法，可以更加高效地查找元素。
.findWhere() 可以接受一个回调函数，来查找符合条件的元素。这样就可以避免 React 重新渲染整个组件树。
例如，在上面的例子中，使用 .find() 来查找第一个 <span> 元素的代码是这样的：
const firstSpan = wrapper.find('span').at(0);但是，使用 .findWhere() 可以更加高效地查找元素：
const firstSpan = wrapper.findWhere(node => node.type() === 'span').at(0);
使用 jest.useFakeTimers() 或 jest.runOnlyPendingTimers()
有些组件样式或功能可能需要在特定的时间间隔内运行。在这种情况下，Enzyme 的测试速度会变得非常慢，因为 Enzyme 的默认设置是等待所有计时器完成后才继续运行测试。
解决这个问题的方法非常简单——使用 Jest 提供的 jest.useFakeTimers() 或 jest.runOnlyPendingTimers() 方法，来在测试中控制计时器的行为。
例如，在下面这个假设我们使用了 setTimeout() 来延迟一些功能的组件中，我们可以使用 jest.useFakeTimers() 来在测试中控制计时器：
-- -------------------- ---- -------
-------- ----------- -
----- ----------- ------------- - ----------------
-------- ------------- -
------------- -- -
-------------------
-- ------
-
------ -
------- -------------------------------- - ---------- - ------ -------------
--
-在测试中，我们可以这样写：
-- -------------------- ---- ------- -------------- --- ------ ---- ----------- -- ------ -- -- - ----- ------- - ------------------ ---- ----------------------------------------- --------------------- -------------------- ------------------------------------------------------- ---
结论
在使用 Enzyme 进行测试时，如果你遇到了渲染大量元素的组件导致测试速度变慢的问题，可以使用上述方法进行优化。在实际的项目中，这些方法可能无法完全解决问题，但是它们可以显著提高测试速度，让你的测试不会消耗太多时间。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674932c1a1ce00635446e6c7