0

I have a form and the corresponding event handlers as below

handleSubmit(event){
  event.preventDefault();
  this.submitBooking();
}


submitBooking(){
    console.log("form submited");
}


render(){
  return(
        <form className="form" onSubmit={this.handleSubmit}>
              // form code goes here
        </form>
  )
}

I have written the following test case to check if handleSubmit() gets called on form submission but it does not work.

describe("Testing function call", () => {
  test("Testing handleSubmit called", () => {
    const wrapper = shallow(<Book />);
    wrapper.find("form").simulate("submit");
    const instance = wrapper.instance();
    instance.handleSubmit = jest.fn();
    expect(instance.handleSubmit).toBeCalled();
  });
})
brass monkey
  • 5,841
  • 10
  • 36
  • 61
chandan kumar
  • 43
  • 9
  • I'm pretty sure you need to create the mock function prior to simulating the action. Move the `const instance = ...;` and `instance.handleSubmit = jest.fn()` lines to the top of the block and see if that fixes it – Daniel Bank Dec 05 '18 at 05:46
  • This answer is what you are looking for: https://stackoverflow.com/questions/41829301/how-to-mock-e-preventdefault-in-react-components-child – Daniel Bank Dec 07 '18 at 02:01
  • Possible duplicate of [How to mock e.preventDefault in react component's child](https://stackoverflow.com/questions/41829301/how-to-mock-e-preventdefault-in-react-components-child) – Daniel Bank Dec 07 '18 at 02:01

0 Answers0