Jest测试组件onChange事件时回调函数未触发问题咨询

可按以下顺序逐一排查修复 #

• 补全fireEvent.change的事件参数
  你当前的触发代码没有传入模拟的事件对象，会导致事件无法正常派发。修改触发逻辑为：

  // 传入模拟的输入值
  fireEvent.change(beneficiaryValue, {
    target: { value: "20" }
  });
  
  // 触发后增加断言验证mock调用情况
  expect(onChange).toHaveBeenCalledTimes(1);
  

• 校验选中的DOM节点是否为真实触发事件的原生input
  自定义Textbox组件通常会给原生输入框套一层容器元素，你当前用id选择器很可能选中的是Textbox的外层包裹节点，而非内部绑定change事件的<input>标签。
  修复方式：
  1. 优先使用Testing Library的语义化查询获取元素，因为你设置了inputType={'number'}，原生数字输入框对应spinbutton角色，可以直接用const beneficiaryValue = dom.getByRole('spinbutton')获取目标输入框
  2. 如果继续使用id选择，先打印选中元素的tagName确认，如果是div等容器标签，调整选择器定位到内部input，例如dom.container.querySelector("#beneficiary-value-0 input")
• 确认自定义Textbox组件正确透传onChange属性
  检查Textbox组件的实现，确保外部传入的onChange属性被直接绑定到了内部原生input的change事件上。部分自定义输入组件会封装自定义事件名（如onValueChange），或者没有做属性转发，会导致外部传入的回调根本没有绑定到真实DOM。
  符合预期的最简Textbox实现参考：

  const Textbox = ({ id, onChange, inputType }) => {
    return <input id={id} type={inputType} onChange={onChange} />
  }
  

• 移除冗余的箭头函数透传
  你在业务组件和测试用例里写的onChange={(e) => props.onChange(e)}、onChange={(e) => onChange(e)}属于无意义的多层包裹，虽然不会直接导致事件不触发，但会增加调试成本，可以直接绑定传入的函数本身：
  业务组件修改为：

  <Textbox 
    id={`beneficiary-value-${props.index}`}
    onChange={props.onChange}
    inputType={'number'}
  />
  

  测试用例修改为：

  <BeneficiaryItem 
    beneficiary={beneficiary} 
    index={0} 
    isEditing={true} 
    onChange={onChange} 
  />
  

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