Can't check if form submit works

Hello! I want to test my registration form submit, but can’t check if submit handler is called. Here is my form:

     <form onSubmit={this.handleSubmit}>
        <label htmlFor="email">Email: </label> 
        <input
          name="email"
          id="email"
          type="email" />
        <label htmlFor="password">Password:</label>
        <input
          name="password"
          id="password"
          type="password" />
        <label htmlFor="password">Confirm password:</label>
        <input
          name="confirm"
          id="confirm"
          type="password" />
        <input type="submit" value="Sign Up"/>
      </form>
  

There is my test:

  it('submit works', () => {
    let submit = jest.fn();
    let wrapper = mount(<SignupForm onSubmit={submit}/>);
    wrapper.simulate('submit', { submit });
    expect(submit).toBeCalled()
  })

I get FAIL - Expected mock function to have been called.

debug()

I use mount because i can set props and this is how looks wrapper.debug():

SignupForm onSubmit={[Function: mockConstructor]}>
      <form onSubmit={[Function]}>
      ....
      </form>
    </SignupForm>

[ljharb]

You don’t have to test if onSubmit works - that’d be testing React itself, and the browser, which isn’t your concern.

All you have to test is that the form has an onSubmit prop, that when invoked (explicitly, not using simulate) does what you expect.

Separately, I’d need to see your component code to be sure how to recommend testing that.

[ljharb]

@floodico right, you don’t need to test that - React and the browser will be sure it’s called. All you need to assert is that the onSubmit is set to the function you expect, and that the function you expect behaves the way you expect.

So, in your case, all you need to do is wrapper.prop('onSubmit') === submit, and you’ve tested everything about that that you need to for SignupForm.