Enzyme浅渲染测试React onChange事件时状态始终保持默认值

1. 状态更新逻辑不匹配：缺少name属性传递 #

你的handleChange是通过e.target.name作为动态键来更新对应state的，这套逻辑要求两个前置条件同时满足：

• 组件内绑定onChange的输入框，必须配置和state字段名完全一致的name属性
• 测试模拟change事件时，必须在target对象里传入对应输入框的name值
  当前你既没有给组件里的两个数字输入框加name属性，测试模拟事件时也只传了value没传name，导致执行setState时生成的键是undefined，根本没有更新到inputFirstNum这个state字段，自然输入值始终是初始默认的1。

修复示例 #

先修正组件内的input标签，补上对应name：

<input type="number" 
      name="inputFirstNum"
      onChange={this.handleChange} 
      value={this.state.inputFirstNum} />
<input type="number" 
      name="inputLastNum"
      onChange={this.handleChange} 
      value={this.state.inputLastNum} />

再修正测试用例的模拟事件参数，补上name字段：

wrapper.find('input[type="number"]').at(0).simulate('change', { 
  target: { name: 'inputFirstNum', value: 111 } 
});

2. Shallow渲染缓存问题（按需处理） #

如果补完name参数后测试还是不通过，是因为Enzyme的shallow wrapper会缓存组件渲染结果，触发setState后需要手动调用update()方法同步最新的渲染状态，再执行断言。

修正后的完整测试用例 #

it('should change the value on 1st-input', () => {
  const wrapper = shallow(<CalcForm />);
  wrapper.find('input[type="number"]').at(0).simulate('change', { 
    target: { name: 'inputFirstNum', value: 111 } 
  });
  // 强制同步最新渲染结果
  wrapper.update();
  expect(wrapper.find('input[type="number"]').at(0).prop('value')).toEqual(111);
});

补充说明：你的组件render部分存在语法笔误，提交按钮后面多了一个没有对应开标签的</div>，会导致DOM结构异常，建议修正form内的标签嵌套，保证所有闭合标签都有对应的开标签。

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