How to mock e.preventDefault in react component's child

Question

Hy, I don't know how to mock an inline function in React component's child

My stack: sinon, chai, enzyme;

Component usage:

<ListItem onClick={() => someFn()} /> 

Component's render:

render() {     return (       <li>         <a href="#" onClick={e => {             e.preventDefault();             this.props.onClick();           }}         > whatever </a>       </li>     );   } 

Here we have onClick function that calls e.preventDefault(). How to tell to <a href>(link) to not to call e.preventDefault()? How can I mock an onClick?

Below is what I have tried in tests:

Shallow copy setup

function setup() {   const someFn = sinon.stub();    const component = shallow(     <ListItem       onClick={() => {         someFn();       }}     />   );    return {     component: component,     actions: someFn,     link: component.find('a'),     listItem: component.find('li'),   } } 

And the test

  it('simulates click events', () => {     const { link, actions } = setup();     link.simulate('click'); //Click on <a href>     expect(actions).to.have.property('callCount', 1); //will be fine if we remove e.preventDefault()   }); 

Test's output error:

TypeError: Cannot read property 'preventDefault' of undefined 

Answer 1

Try this

link.simulate('click', {   preventDefault: () => {   }  });