模拟vs道具-使用Jest和Enzyme进行On Change事件 [英] Simulate vs props - On Change event using Jest and Enzyme

问题描述

我正在尝试对多个onChange事件进行测试.现在，测试通过了以下代码，但不影响其覆盖范围，表示错误

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'}}} ) 

这里是Render()的一部分，显示了我要测试的onChange事件:

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>

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

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'}}})
})

推荐答案

simulate和prop调用可以互换，这基本上是simulate在内部执行的操作. 在下一个酶版本中，simulate会被弃用.

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.

提供的两个代码段不可互换，因为它们被应用于不同的组件.如果调用onChange prop，则应在同一组件上调用它:

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'}}})

这篇关于模拟vs道具-使用Jest和Enzyme进行On Change事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！