document.querySelector CHANGE事件？

Posted 2021-04-13

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

使用jest和酶进行反应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

答案

你可以使用enzyme's simulate()

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