Question

是否可以在Modal中使用document.querySelector测试onChange事件

使用笑话和酶来反应js文件

  <Modal isOpen={this.state.quickFilterModalOpen} style={descriptionModalStyle}>
     <div>
        <div className='fullmodal'>
          <div id='close-modal' className='sidemodal_addnew_x' onClick={this.closeModal}>
            <FontAwesome name='xbutton' className='fa-times' />
          </div>
        </div> 
   <div className='advanced-search-modal-body'>
       <div className='advanced-search-modal-inner'>
        <label>First Name</label>
       <input  id='first-name-filter'onChange={(e) => {this.setState({advancedFilter: {...this.state.advancedFilter, FirstName: e.target.value}})}}  value={this.state.advancedFilter.FirstName}/>

这是我的测试文件到目前为止，我已经完成了点击事件，但没有完成Onchange 试图让以下onChange事件通过

it('Test click event on Modal : Save Button', () => {
   baseProps.onClick.mockClear();
   ReactModal.setAppElement('body');
   wrapper = mount(
     <ReactModal isOpen>
         <div className="fullmodal">
         some content
         </div>
     </ReactModal>,
    {attachTo: mountingDiv}
    );
   wrapper.setState({
    quickFilterModalOpen:true,
    advancedFilter:'test'

})
wrapper.update()
expect(wrapper.find('.fullmodal').exists()).toEqual(false);
expect(!!document.body.querySelector('.fullmodal')).toEqual(true);
document.querySelector("#first-name-filter").change(); //wrong

Answer 1

您可以使用enzyme's simulate()

wrapper.find('.fullmodal').simulate('change', { ...optionalMockEventDataToPass });

document.querySelector更改事件？

1 个答案: