模拟与道具 - 使用 Jest 和 Enzyme 进行更改事件

我正在尝试对多个 onChange 事件运行测试。现在测试通过了以下代码，但不影响其覆盖率，意味着不正确

wrapper.find('Datasubjects').props().onChange({City:{target:{value:'test'}}})

但如果我使用以下命令，它会失败：

wrapper.find('Datasubjects').find('input[id="city-label-id"]').simulate('change',{City:{target: {value:'test'}}} ) 

这是 Render() 的一部分，显示了我正在尝试测试的 onChange 事件：

<Modal isOpen={this.state.quickFilterModalOpen} style={descriptionModalStyle}>

<div className='advanced-search-modal-body'>

<label>City</label>
<input id='city-label-id' onChange={(e) => {this.setState({advancedFilter: {...this.state.advancedFilter, City: e.target.value}})}}  value={this.state.advancedFilter.City}/>
</div>

这是我使用 Jest Enzyme for React JS 的测试文件的一部分

   beforeEach(() => wrapper = mount(<BrowserRouter><Datasubjects {...baseProps} /></BrowserRouter>)

  it("Test onChange event on City - Label", () => {
baseProps.onChange.mockClear();
wrapper.find('Datasubjects').setState({
    advancedFilter:{
        City:'test-city'
    },
    quickFilterModalOpen:true
    });

wrapper.update() 
wrapper.find('Datasubjects').find('input[id="city-label-id"]').props().onChange({City:{target:{value:'test-city'}}})
})

simulate和 prop 调用是可以互换的，这基本上就是simulate内部做。simulate预计在下一个 Enzyme 版本中将被弃用，因为它是多余的。

提供的两个片段不可互换，因为它们应用于不同的组件。以防万一onChange调用 prop 时，应该在同一组件上调用它：

wrapper
.find('Datasubjects')
.find('input[id="city-label-id"]')
.props()
.onChange({City:{target:{value:'test'}}})