Simulate is meant to be run on 1 node = 0 found

Question

Unable to make the following test pass : Using React JS / enzyme and jest

I already asked a similar question and try to apply the same method, but its not going through. Any reason ?? Substitute shallow = mount ? or add a dive() ?

file.test.js -

 // jest mock functions (mocks this.props.func)
const updateSelectedFormJSON =  jest.fn();
const closeModal =  jest.fn();
const onClick =  jest.fn();
const onSaveClick =  jest.fn();
 // defining this.props
 const baseProps = {
selectedFormJSON :{
    FORM_COLUMN:[],
},
updateSelectedFormJSON,
closeModal,
onClick,
 onSaveClick,

describe('SpecifyBodyModal Test', () => {
 let wrapper;
 let tree;

beforeEach(() => wrapper = mount(<SpecifyBodyModal {...baseProps} />));

    it('should call  closeModal functions on button click', () => {
   baseProps.closeModal.mockClear();
   wrapper.setProps({
  updateSelectedFormJSON :null
  });
 wrapper.find('.add-custom-field-close').at(0).simulate('click')
 expect(baseProps.closeModal).toHaveBeenCalled();
 });

the 2nd test is not passing: error Method “simulate” is meant to be run on 1 node. 0 found instead.

    it('should call onSaveClick functions on button click', () => {
  baseProps.onSaveClick.mockClear();
  wrapper.setProps({
  closeModal :null
 });
 wrapper.find('.tran-button specify-body-continue').at(1).simulate('click')
 expect(baseProps.onSaveClick).toHaveBeenCalled();

here is the render file js.

          onSaveClick = () => {
let json = Object.assign({}, this.props.selectedFormJSON);
for(let i in json.FORM_COLUMN) {
  json.FORM_COLUMN[i].IncludeInBody = this.state[json.FORM_COLUMN[i].Name];
}
this.props.updateSelectedFormJSON(json);
this.props.closeModal();

       render() {
return (
  <div className='specify-grid-modal'>
    <div className='fullmodal'> 
      <div className='fullmodal_title'>Specify Body</div>
      <div title="Close Window" className="add-custom-field-close" onClick={() => this.props.closeModal()}><FontAwesome name='xbutton' className='fa-times  preview-close' /></div>
    </div>
    <button className='tran-button specify-body-continue' onClick={() => {this.onSaveClick()}} >
      Continue
    </button>
    <div className='specify-body-wrapper'>
      {this.renderColumns()}
    </div>
  </div> 
)

}

Answer 1

The error means that there are no matches for className.add-custom-field-close selector.

className is prop name and shouldn't be included into the selector:

wrapper.find('.add-custom-field-close').at(0).simulate('click')