Enzyme中shallow与mount渲染的模拟差异及测试问题解析

咱们先拆解这个问题的核心原因：
你的组件里的onChange用了e.currentTarget.value，而mount和shallow对事件模拟的处理逻辑不一样——shallow只渲染当前组件，事件处理是直接调用组件实例上的方法，你手动传入的currentTarget能被函数直接读取；但mount是模拟真实浏览器的DOM渲染，它的事件系统会自动绑定currentTarget，你手动传的参数并不会被正确识别，导致组件state没更新，测试自然失败。

要让mount测试通过其实很简单，把事件参数改成React表单处理的常规写法就行：

// 测试代码里的模拟事件改成用target
wrapper.find('#foo').simulate('change', { target: { value: 'bar' } });

同时把组件里的onChange也改成常规写法：

onChange = (e) => {
  this.setState({ value: e.target.value });
};

这样不管用shallow还是mount，测试都能正常跑通。

接下来聊聊这两种渲染方式的实际区别，帮你在不同测试场景里选对工具：

• 渲染范围完全不同

  • shallow：只渲染当前组件，完全不处理子组件。子组件的生命周期、内部逻辑都不会触发，非常适合单元测试——只聚焦当前组件的逻辑，不被子组件的实现干扰。
  • mount：渲染完整的组件树，包括所有嵌套子组件，模拟真实浏览器的DOM环境。适合集成测试，需要验证组件和子组件的交互，或者依赖真实DOM特性的场景（比如ref操作、第三方DOM库、滚动事件）。

• 事件模拟的逻辑差异

  • shallow的事件模拟是直接调用组件上的事件处理函数，你传的参数会原封不动传给函数，不用考虑真实DOM事件的规则。
  • mount的事件模拟更贴近真实场景，会触发React的合成事件系统，像currentTarget这类属性是由系统自动绑定的，手动传入往往不会生效。

• 性能与测试效率

  • shallow因为只渲染单个组件，测试速度快，适合写大量的单元测试用例。
  • mount要渲染完整组件树，速度相对慢一些，适合关键业务路径的集成测试。

• 适用场景总结

  • 用shallow：测试组件的render输出、内部状态更新、props接收逻辑、独立的事件处理函数（不依赖子组件）。
  • 用mount：测试组件与子组件的交互（比如子组件触发事件后父组件的状态变化）、依赖DOM的功能、高阶组件的完整渲染效果。

内容的提问来源于stack exchange，提问作者Fabian