Enzyme 中的 mount 与 shallow 的区别解析
在 React 的单元测试中，Enzyme 是一个非常流行的测试工具库。在 Enzyme 中，有两种常用的测试方法 mount 和 shallow，这两种方法的区别很重要，尤其是在测试 React 组件时更是如此。本文将着重介绍 mount 和 shallow 的差异，为读者深入了解这两种测试方式提供指导。
一、mount 和 shallow 方法的介绍
在 Enzyme 中，mount 和 shallow 都是测试 React 组件的方法。其中，mount 是将一个组件挂载到 DOM 上，并产生一个完整的生命周期，包括 componentWillMount，componentDidMount 等等。这种测试方式是完全模拟了 React 的渲染过程，并且能够执行子组件中的代码。而 shallow 方法则不同，shallow 方法仅渲染组件本身，不会渲染组件内部的子组件。也就是说，它只会渲染当前组件的一个虚拟 DOM，不会完整地渲染真实 DOM 和子组件。这种测试方式是较为轻量级的方式，适合测试 React 组件的浅层次行为。下面我们来看看两者之间的具体差异。
二、两种测试方法的区别
- 组件层级
首要区别在于 mount 方法会渲染出完整的组件树，它会填充组件内部所有子组件，包含 DOM 和子组件的声明周期。而 shallow 方法仅会渲染出最外层的组件。因此如果我们测试的是一个多层级的组件树， 我们就需要考虑两种测试方式的不同。如果想要测试组件内部的子组件，那么我们需要使用 mount 方法。如果我们只需要测试外部的组件，那么 shallow 方法就足矣。
- 执行顺序
另一个区别就是组件的声明周期。mount 方法模拟了真实的 DOM 和组件的生命周期，所以它会执行组件内部的所有 API。相反，shallow 方法只执行了组件自身的生命周期钩子。这是因为渲染并不是完全的，它只是有效地创建了一层虚拟 DOM 包装，并执行了组件的 componentWillMount 钩子函数，但是没有发生任何的 DOM 操作。
- 耗时
最后一个区别是测试的耗时。由于 mount 方法需要完全渲染组件树，所以在性能上会比 shallow 方法略慢。如果组件树是较为庞大， mount 测试将不可避免地耗费更多的时间和计算资源。
三、示例代码
下面的代码示例将帮助我们更好地理解 mount 和 shallow 方法的差别。
- mount 方法示例
下面的代码是一个 Counter 组件，它有一个增加和减少计数的按钮。当我们点击按钮时，我们测试它是否增加和减少技数，并使用 mount 方法来测试这个行为。
-- -------------------- ---- ------- ------ - ----- - ---- --------- ------ ------- ---- ------------ ---------- ----------------- --------- -- -- - ----- ------- - -------------- ---- ----- ---------- - ---------------------------- ----- ----------- - ----------------------------- ----- ------- - ------------------------- ------------------------------------ ----------------------------- ------------------------------------ ------------------------------ ------------------------------ ------------------------------------- ------------------ ---
- shallow 方法示例
如果我们使用 shallow 方法来测试上述 Counter 组件，代码将变得更简洁。我们可以看到，我们仅仅渲染了 Counter 组件，而没有渲染它内部的子组件。
-- -------------------- ---- ------- ------ - ------- - ---- --------- ------ ------- ---- ------------ ---------- ----------------- --------- -- -- - ----- ------- - ---------------- ---- ----- ---------- - ---------------------------- ----- ----------- - ----------------------------- ----- ------- - ------------------------- ------------------------------------ ----------------------------- ------------------------------------ ------------------------------ ------------------------------ ------------------------------------- ---
四、总结
本文介绍了 Enzyme 中的 mount 和 shallow 测试方法的区别。mount 方法会渲染所有子组件，执行完整的声明周期并且使用真实的 DOM。与之不同，shallow 方法仅渲染当前的组件，该方法仅执行该组件的声明周期钩子并返回虚拟 DOM。 如果您需要测试组件中的子组件，那么mount 是您最好的选择。但如果您希望测试浅层次的组件行为，随时记住shallow 方法是您的最佳选择。了解这两种测试方法的区别和灵活使用，将有助于我们更好地编写单元测试和组件级的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/664bfa90d3423812e4ad0160