React Hooks+Jest+Enzyme环境下表单输入值更新测试失败求助

我之前也碰到过完全一样的问题，核心原因其实和React Hooks的状态更新特性、Enzyme的组件渲染机制有关，咱们一步步拆解解决：

问题根源 #

1. React Hooks的状态更新（比如useState的更新函数）是异步操作，模拟change事件后，组件不会立刻完成重新渲染。
2. 你一开始获取的input变量是组件更新前的DOM引用，Enzyme不会自动帮你更新这个引用，直接用它断言自然拿不到新值。

修正后的测试代码 #

it("should display an item", () => { 
  const input = wrapper.find('[name="title"]') 
  input.simulate("change", { target: { value: "Buy Bread" } }) 

  // 方案1：重新获取input元素（更推荐，避免手动更新的潜在问题）
  const updatedInput = wrapper.find('[name="title"]')
  expect(updatedInput).toHaveValue("Buy Bread") 

  // 或者方案2：先强制触发组件更新，再用原引用断言
  // wrapper.update()
  // expect(input).toHaveValue("Buy Bread")
})

关于后续表单提交的测试提示 #

如果要验证表单提交后的状态变化，你可以这么做：

• 确保组件的onSubmit处理函数正确读取了输入框对应的状态值
• 模拟表单的submit事件：wrapper.find('form').simulate('submit', { preventDefault: () => {} })
• 之后通过断言页面渲染结果（比如新增的列表项）来验证状态变化，因为Hooks函数组件没有实例，直接断言状态会比较麻烦，断言UI表现更直观可靠。

另外还要注意：确保你的Enzyme适配器版本适配React 16.8+（比如enzyme-adapter-react-16及以上），不然Hooks组件的测试可能会出现异常。

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