在 React 前端开发中，我们常常使用 Enzyme 来进行组件的单元测试。其中，深度渲染 (shallow) 和完整渲染 (mount) 是 Enzyme 最为常用的方式之一。但是，采用深度渲染也存在着一些缺陷。本文将围绕着这些缺陷进行探讨，并提供一些解决方案。
Enzyme 深度渲染的缺陷
关于副作用
在 Enzyme 的深度渲染中，虽然可以模拟组件的渲染以及操作，但是我们也需要考虑组件之间的交互效果。比如，父子组件之间的调用关系，以及在 componentDidMount 或 componentDidUpdate 等生命周期函数中造成的副作用等等。
这些副作用在深度渲染中很难去模拟。通常情况下，我们只能通过对组件的复杂度进行分解，或者对某些需要进行副作用操作的组件进行单独的测试等手段来解决这些问题。
关于性能
另外一个缺陷是性能问题。在 Enzyme 的深度渲染中，如果 component 的 render 函数较为复杂，或者组件的嵌套较深，那么渲染会变得十分耗时。例如，以下代码：
-- -------------------- ---- -------
----- ---- - -- -- -
----
---- -- -- -- ------------ -- -
--- --------------------
---
-----
--
----- --- - -- -- -
-----
---- -- -- -- ------------ -- -
----- --------- --
---
------
--
----- ------- - ------------ ----当我们运行这个测试用例时，渲染会变得十分缓慢。如果您在项目中共享了一个较大的组件，在深度渲染时也会遇到类似的问题。
如何避免 Enzyme 深度渲染的缺陷
使用浅层比较
如果您需要测试 shallow 渲染的代码，那么尽量避免以下代码的写法：
it("should show the correct count after clicking add", () => {
const wrapper = shallow(<Counter />);
// ...
expect(wrapper.find(".count").text()).toBe("1");
});因为这种写法会涉及到真正的渲染过程。而渲染过程总是会涉及到性能问题，也会涉及到测试中副作用的问题。所以，我们应该避免直接比较组件的输出。
相反，我们可以使用 shallow 的 debug() 方法，将组件所包含的所有节点都打印出来。通过此方法，我们可以对组件进行浅层比较，得出测试结果：
it("should show the correct count after clicking add", () => {
const wrapper = shallow(<Counter />);
// ...
expect(wrapper.debug()).toContain("<span className=\"count\">1</span>");
});这样就可以避免真正的渲染，并且通过打印节点进行浅层比较，从而提高测试效率。
使用骨架组件
如果您需要测试深度渲染的代码，那么建议使用骨架组件。所谓骨架组件，是指只包含了一些必要属性和方法的模拟组件。这样做的好处是，我们可以快速的进行测试，并且不用考虑组件的生命周期函数和副作用等问题。
例如，以下是一个利用骨架组件进行测试的例子：
-- -------------------- ---- -------
---------- ---- --- ------- ----- ----- -------- ----- -- -- -
----- ------- - -------------- ----
----- ------------ - -------------------------------
-------------------------------
----- -------- - -
------ - ------ - -
--
-------------------------------------- ------------- ----------------
---在这种情况下，我们并没有使用真正的 Counter 组件，而是利用一个骨架组件进行测试。这样做的好处是，我们可以快速的进行测试，并且不用考虑组件的生命周期函数和副作用等问题。
总结
Enzyme 的深度渲染功能虽然强大，但也存在着副作用和性能问题。如果您需要对组件进行深度测试，那么建议使用骨架组件的方法，从而提高测试效率。如果您只需要对组件进行浅层测试，那么避免直接比较组件的输出，而是使用浅层比较的方法来进行测试。希望这篇文章对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cf4535b5eee0b5256a6a0c