reactjs - .simulate('click') only working when done twice on the same component, through ID and Class -

i have gone through existing issues , not find 1 similar this.

i have button element so, sits within <contact/> component testing:

<div> ... <button id="contact-button-submit" classname="btn btn-primary btn-lg" onclick={this.handlesubmit}>submit</button> ... </div> 

and here test:

it('calls handlesubmit when submit button clicked', () => {     let wrapper = shallow(<contact {...mockprops} />);     wrapper.instance().handlesubmit = jest.fn();     let { handlesubmit } = wrapper.instance();     expect(handlesubmit).tohavebeencalledtimes(0);     wrapper.find('#contact-button-submit').simulate('click'); // simulate click want     wrapper.find('.btn-primary').simulate('click'); // simulate click had add     expect(handlesubmit).tohavebeencalledtimes(1); }); 

the funny thing that, when include first simulate click (the id one), test fails @ last expect. onclick function (handlesubmit) never called. when add second 1 uses classname, passes.

it seems both need present. fail if 1 removed.

are there known causes this? i'm scratching head on this.

the solution me use jest.spyon

it('calls handlesubmit when submit button clicked', () => {     const handlesubmit = jest.spyon(contact.prototype, 'handlesubmit');     let wrapper = shallow(<contact {...mockprops} />);     expect(handlesubmit).tohavebeencalledtimes(0);     wrapper.find('#contact-button-submit').prop('onclick')();     expect(handlesubmit).tohavebeencalledtimes(1); }); 

the issue was stubbing method after shallow rendering it, when in fact needed before.