userEvent.click doesn't trigger onSubmit callback from the form

• @testing-library/user-event version: @testing-library/user-event@12.8.3
• Testing Framework and version: jest@26.6.0
• DOM Environment: jsdom@16.5.1

Relevant code or config

// component at its most reduced schema

  return (
     <form  name='registrationForm' onSubmit={ () => window.alert('saved') }>
              <Button>Save</Button>
    </form>
);

What you did: test the componenent like so

  it('should save something', async () => {
    render(<Component/>);    
    userEvent.click(screen.getByRole('button', { name: 'save' }));
    expect(await screen.findByText('saved')).toBeInTheDocument();
  });

What happened:test fails with stacktrace TestingLibraryElementError: Unable to find an element with the text: saved. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

The alert is not rendered - the onSubmit method was not triggered. Obviously, the button has no callback for onClick, but one one in the form should have been triggered, shouldn’t it?

Reproduction repository: None

Suggested solution:

When I change the component to this, the alert renders, and test passes :

  return (
     <form  name='registrationForm'>
              <Button onClick={ () => window.alert('saved') }>Save</Button>
    </form>
);

That’s odd.

[MidnightDesign]

I was debugging a similar error for an hour or two… My onSubmit wasn’t triggered because the form wasn’t valid. I had some required fields that were empty. The version I upgraded from (maybe it was the old version of JSDOM) didn’t validate forms.

I don’t know if this library could implement something that would prevent other users from wasting time on something like this. Maybe a verbose mode that gives the user a more detailed log:

Hovering over the element
Clicking the element
Firing "onClick"
Firing "onSubmit" on the element's form
Warning: Could not submit form because it is invalid

[ph-fritsche]

@chrys-exaucet The submit handler is called. window.alert does not insert any element into the document. https://codesandbox.io/s/click-on-button-submits-form-forked-o9u99?file=/src/App.js