React组件浏览器运行正常 测试时无法访问ref绑定的DOM子元素

你的代码逻辑、fireEvent使用、测试搭建都没有问题，你观察到的「无法访问子元素」只是Jest依赖的jsdom环境的日志输出特性导致的假象。

具体解释 #

Jest测试时是用jsdom模拟浏览器DOM环境，它对HTMLCollection、NodeList这类类数组集合的console序列化存在缺陷：直接打印这类对象时会输出空对象{}，但实际上集合内的元素是真实存在的。
你已经能正常拿到firstChild的值，刚好可以证明子元素实际存在，只是日志输出的表现不符合预期。

验证方法 #

你可以在handleClick方法中新增以下打印内容，就能确认子元素可正常访问：

// 打印子元素数量，会输出2
console.log('子元素数量', inputContainer.current.children.length)
// 将类数组转为普通数组后打印，能看到两个input元素
console.log('子元素数组', Array.from(inputContainer.current.children))
// 直接访问第二个input元素，可正常读取属性
console.log('第二个输入框', inputContainer.current.children[1])

• 你对fireEvent的使用和测试搭建完全没有问题，组件在浏览器的运行表现和测试环境下的逻辑是一致的
• 你用ref访问DOM元素的方式完全合理，符合非受控表单批量操作的场景需求，不需要更换实现方案
• 你可以继续使用testing-library测试该行为，后续做粘贴事件逻辑时，直接模拟paste事件后断言各个输入框的值即可，不需要更换测试工具。

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