@testing-library/react测试带固定value的input触发change不生效如何解决？

问题根因 #

你遇到的是React受控组件的典型绑定逻辑问题：

• 你给input硬编码了固定属性value=""，同时传入了onChange回调，这符合React受控组件的判定规则，input的渲染值会完全由传入的value属性决定。
• 你触发change事件后，onChange回调执行修改了typedName状态，但input的value始终被固定写死为空字符串，React会强制将DOM上的input值重置为空，所以不管用哪种事件触发方式，断言都会拿到空值。
• 移除value属性后，input自动变为非受控组件，值由DOM本身维护，事件触发后值自然更新，因此测试可以通过。
• 你提到生产环境运行正常，大概率是你贴示例代码时出现了简化误差，实际生产代码中input的value是绑定了typedName变量（即value={typedName}），而不是硬编码的固定空字符串；也有可能是测试封装的makeSut方法渲染组件时，没有完整保留生产环境的state绑定上下文，单独渲染input时错误写死了value属性。

解决思路 #

1. 修正受控组件绑定
   把input上硬编码的value=""替换为和状态绑定的变量：

<input
  name="name"
  type="text"
  data-testid="input"
  onChange={(e) => setTypedName(e.target.value)}
  value={typedName}
/>

这是符合受控组件规范的写法，生产和测试环境都会正常运行。

2. 改用非受控组件写法
   如果你的业务场景不需要通过state严格控制input值，只需要设置初始空值，把value=""改为defaultValue=""即可：

<input
  name="name"
  type="text"
  data-testid="input"
  onChange={(e) => setTypedName(e.target.value)}
  defaultValue=""
/>

defaultValue只会在组件首次挂载时设置初始值，后续值由DOM维护，测试时修改事件会正常生效。

3. 修正测试用例的渲染逻辑
   检查makeSut方法的实现，确保测试时渲染的是完整的包含state逻辑的组件，不要单独抽离input渲染导致state和value的绑定关系失效。

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