RTL快照测试中container和container.firstChild的区别是什么

首先明确React Testing Library中container的本质：调用render方法时，RTL会自动创建一个空的div元素作为容器，把你要测试的组件渲染到这个div内部，这个div就是返回的container对象。两者的核心区别如下：

• 快照内容结构不同
  直接对container做快照断言时，快照会保留RTL自动生成的外层div包裹层。假设你的组件渲染输出为<p>测试内容</p>，最终的快照结构为：

  <div>
    <p>测试内容</p>
  </div>
  

  对container.firstChild做断言时，会直接取你组件渲染的第一个根节点，快照不会包含RTL生成的外层div，结构更贴合组件本身的输出，上面的例子快照就只会保留<p>测试内容</p>。
• 适用场景不同
  • 当你的组件是多根节点组件（也就是用Fragment包裹，直接返回多个平行元素没有共同父节点）时，只能用container做快照。因为container.firstChild只会拿到第一个根节点，剩下的平行节点都会被遗漏，导致快照不完整。
  • 当你的组件是单根节点，且希望快照只聚焦组件本身的输出、去掉无关的外层容器时，选择container.firstChild更合适，生成的快照更简洁易读。
• 异常表现不同
  如果组件渲染结果为空（比如条件渲染命中了返回null的分支），container.firstChild的值为null，此时执行快照断言会直接抛出错误。而对container做断言只会生成一个空div的快照，不会触发报错。
• 特殊场景差异
  如果你在测试过程中手动向container内插入了其他非组件渲染的元素，container快照会包含这些额外元素，container.firstChild则不受影响（只要插入的不是第一个子元素）。

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