我正在尝试为以下代码运行单元测试。我已经测试了onClick和onChange以及this.props
onBlur似乎没有基于setState正常工作
这是onBlur调用的方法
handleChange = (e) => {
let localState = Object.assign({}, this.state)
localState[e.target.name] = e.target.value
let settingsObj = {
0: {
matchValue: e.target.name,
value: e.target.value,
transformType: 'replaceElement'
}
}
if(e.target.name === 'viewtitle'){
this.props.updateViewName(e.target.value);
}
this.props.updateViewXMLValue(settingsObj)
this.setState(localState)
}
这是onBlur事件:
Title
</div>
<div className='tab-input-container'>
<input name='viewtitle' type='text' className="shape-dropdown" placeholder='Title' defaultValue={this.props.defaultData.viewtitle[0].length === 0 ? null : this.props.defaultData.viewtitle[0]} onBlur={this.handleChange}/>
</div>
这是我的测试文件:
it('Testing onBlur event on ViewTitle', () => {
baseProps.updateViewName.mockClear();
wrapper.setProps({
defaultData:{
viewtitle:[ [] ],
}
});
wrapper.setState({
localState: "blur"
});
wrapper.update()
wrapper.find('input[name="viewtitle"]').simulate('blur',
{
target: {
value:'blur-Test',
name:'viewtitle'
}
});
expect(baseProps.updateViewName).toHaveBeenCalled();
expect(wrapper.state('localState')).toEqual('blur-Test');
});
似乎目标值不会干扰
根据你的代码:localState[e.target.name] = e.target.value
,onBlur
处理程序将状态对象viewtitle
设置为输入的任何内容。
因此,如果你的原始状态是{localState: "blur"}
,那么新的状态将是{localState: "blur", viewtitle: "blur-test" }
,你的测试将失败,因为它正在查看localState
键。