Jest使用react-test-renderer时快照出现undefined属性的技术疑问

我之前特意去翻了react-test-renderer的源码，想搞清楚这个问题，但没找到对应的相关内容。不过结合React的渲染规则和Jest快照的设计逻辑，我可以分享下我的理解：

• React的DOM渲染规则：在React中，值为undefined的组件元素属性确实不会被渲染到实际DOM中。举个例子，当bat = undefined时，<Foo bar={bat} />最终生成的HTML里完全看不到bar这个属性，这是React的预期行为，目的是避免DOM上出现无意义的空属性。

• Jest快照的设计逻辑：你疑惑的点在于为什么可选组件属性会出现在Jest快照的JSON树中——这是因为快照的核心作用是验证组件接收的属性传递情况，而非模拟实际DOM的渲染结果。快照本质是把react-test-renderer生成的组件渲染树（虚拟DOM结构）序列化后的产物，它会完整记录组件接收到的所有props，哪怕某个prop的值是undefined。这么做的意义在于帮你确认：组件确实接收到了这个可选属性，只是它的值为undefined，而不是这个属性根本没被传递给组件。

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