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

[exaucae]

• @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.

[ph-fritsche]

I could not reproduce this.
What puts "saved" into the document?
How did you assert that onSubmit is not triggered?

Could you please set up a minimal reproduction at codesandbox.io?

[exaucae]

Hello @ph-fritsche,

By the time, I get used to codesandbox.io, I've just updated the answer above for explanation purpose. Is that good for you?

[ph-fritsche]

@chrys-exaucet It looks like the error is in your implementation. But it is a guessing game without the code of the component under test.

Submit works fine:
https://codesandbox.io/s/click-on-button-submits-form-l9f4j?file=/src/App.test.js

Try to reproduce your bug in the codesandbox. Most likely you will find your bug just by isolating it that way.
Should you require help, I can have a look at it once your sandbox yields your result. Most likely finding the error will take a lot less time than already spent on this issue.

Should we stumble over a bug that is reproducible in codesandbox, I'll gladly reopen this. But for now this is just a guessing game.

[exaucae]

There it is , @ph-fritsche : https://codesandbox.io/s/click-on-button-submits-form-forked-1m6t9?file=/src/App.test.js .

[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

[exaucae]

Thanks for your reactivity, @ph-fritsche !

I'm able to run your test successfully, except this console error is printed:

console.error Error: Not implemented: HTMLFormElement.prototype.submit at module.exports

Is that normal?

On the window.alert , I'll be able to refine my code since the original issue is (almost) fixed..

EDIT:
I figured out the source of the console error. Not user-event related . If you want to know, have a lokk at this jsdom issue

Thanks for your support @ph-fritsche !

[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]

@MidnightDesign Could you open a new issue for the idea of a verbose mode?

[Adebisi01]

try

// jsx
  return (
     <form  name='registrationForm'  data-testid='form'>
              <Button onClick={ () => window.alert('saved') }>Save</Button>
    </form>
);
// test
await act(async () => {
      await fireEvent.submit(screen.getByTestId("form"));
    });```