onBlur函数setState异常，单元测试中target值未生效求助

看起来你在测试onBlur触发的状态更新时踩了个常见的小坑，我帮你梳理下问题所在和修正方案：

核心问题：测试断言与组件state结构不匹配 #

你的handleChange方法里，是把输入框的值更新到state中与输入框name对应的字段（也就是viewtitle），但你的测试代码却在断言wrapper.state('localState')——这完全不对：

• 你的组件state里根本没有localState这个属性，你手动设置的wrapper.setState({ localState: "blur" })是多余且错误的
• 你应该断言的是state中的viewtitle字段，这才是handleChange实际更新的内容

修正后的测试代码 #

把测试代码调整成这样，就能得到预期结果：

it('Testing onBlur event on ViewTitle', () => {
  baseProps.updateViewName.mockClear();
  wrapper.setProps({
    defaultData:{
      viewtitle: [''], // 调整为更符合字符串类型的初始值，避免数组判断混淆
    }
  });
  wrapper.update();
  // 触发blur事件，传递正确的target参数
  wrapper.find('input[name="viewtitle"]').simulate('blur', { 
    target: { value:'blur-Test', name:'viewtitle' } 
  });
  // 可以更精确地断言updateViewName的调用参数
  expect(baseProps.updateViewName).toHaveBeenCalledWith('blur-Test');
  // 断言正确的state字段
  expect(wrapper.state('viewtitle')).toEqual('blur-Test');
});

额外优化建议 #

1. 优化组件的handleChange方法 #

你当前用Object.assign复制state的方式虽然能工作，但使用React的函数式setState会更安全，尤其是当state更新依赖于之前的state时：

handleChange = (e) => {
  const { name, value } = e.target;
  
  // 用函数式setState确保获取最新的state
  this.setState(prevState => ({
    ...prevState,
    [name]: value
  }));
  
  const settingsObj = {
    0: { matchValue: name, value, transformType: 'replaceElement' }
  };
  
  if(name === 'viewtitle'){
    this.props.updateViewName(value);
  }
  this.props.updateViewXMLValue(settingsObj);
}

2. 调整defaultData的结构 #

你当前设置的defaultData.viewtitle:[ [] ]会让组件里的defaultValue判断有点奇怪（因为你在判断数组的length），如果viewtitle应该是字符串类型，直接设置成viewtitle: ['']会更符合逻辑，避免不必要的数组嵌套。

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