Question

我正在尝试测试多个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'}}})
})

Answer 1

simulate和prop调用是可以互换的，这基本上是simulate在内部执行的操作。 simulate可能会在下一个Enzyme版本中被弃用，因为它是多余的。

提供的两个代码段不可互换，因为它们应用于不同的组件。如果调用onChange属性，则应在同一组件上调用它：

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

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

1 个答案: