React快照测试中Mock子组件的合理性及相关问题咨询

这是单元测试分层原则下的典型取舍，核心逻辑可以从三个维度理解：

• 单元测试的核心边界是仅验证当前组件自身的逻辑
  父组件的单元快照测试的目标，是校验父组件自身负责渲染的内容是否符合预期，而非子组件的内部实现。以你的示例为例，FirstComponent的单元测试只需要确认：它渲染了className为container的div、对应的h1标题、p说明文本、且确实在对应位置渲染了HugeComponent即可，HugeComponent内部的布局、DOM结构不属于FirstComponent的职责范围，不需要在FirstComponent的测试中校验。
  你提到的「父组件UI随子组件变更但测试未感知」的情况，本身就不是父组件单元测试要覆盖的场景：如果子组件的变更是预期内的，父组件的UI变化也属于预期变更，不需要父组件的测试告警；如果子组件的变更是非预期的，HugeComponent自身的单元快照测试会第一时间失败，问题会在子组件的测试环节就被拦截。
• 避免快照维护成本指数级上升
  如果不MockHugeComponent，一旦HugeComponent的内部结构发生变化，所有引用它的N个父组件的快照都会同步失效。你需要逐一更新N份快照，且无法快速区分某次快照变更是来自父组件自身的修改，还是子组件的修改，快照测试的「快速识别非预期变更」的价值会完全失效——大量无意义的变更噪音会导致开发者后续直接全量跳过快照校验，盲目更新所有快照。
• 子组件的集成校验可以通过上层测试覆盖
  如果你需要验证父组件和HugeComponent集成后的整体UI效果，不需要在每个父组件的单元测试中都引入全量子组件，单独写1~2份集成测试的快照即可，其余场景仍然使用Mock的子组件，既可以覆盖集成校验的需求，也不会带来过高的维护成本。

补充说明：是否Mock子组件也需要灵活调整，如果子组件是结构简单、变更频率极低的基础组件（比如Button、Tag等），不Mock也不会带来过高的维护成本，也可以选择不Mock。

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