Simulate vs props - On Change event using Jest and Enzyme

问题

I am trying to run test for multiple onChange events. The test right now passes with the following code but does not affect its COVERAGE, means incorrect

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

But it fails if I use the following:

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

Here is part of Render(), showing the onChange event that I am trying to test:

<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>

Here is my part of my test file using 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'}}})
})

回答1:

simulate and prop call are interchangeable, this is basically what simulate does internally. simulate is expected to be deprecated in next Enzyme version because it's redundant.

Two provided snippets aren't interchangeable because they are applied to different components. In case onChange prop is called, it should be called on the same component:

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

来源：https://stackoverflow.com/questions/55405175/simulate-vs-props-on-change-event-using-jest-and-enzyme

标签

reactjs

jestjs

onchange

enzyme