Skip to content

Submitting a form by clicking on submit button throws jsdom console errors for unimplemented submit #1297

@ItamarGronich

Description

@ItamarGronich

Reproduction example

https://github.com/ItamarGronich/react-testing-library-submit-form

Prerequisites

  1. Clone the repo
  2. Install dependencies with pnpm i
  3. run test with pnpm test

Expected behavior

Submitting a form by simply clicking the submit button should not log any errors to the console.

Actual behavior

Submitting a form by clicking the submit button logs jsdom errors for unimplemented submit

Error: Not implemented: HTMLFormElement.prototype.requestSubmit

User-event version

14.6.1

Environment

Testing Library framework: @testing-library/[email protected]
JS framework: [email protected]
Test environment: [email protected]
DOM implementation: [email protected]

Additional context

First of all i want to express my deep appreciation of testing library, how it's orchestrated and written.
It's truly a fine piece of open source software and a delight to use so Kudos to everyone involved 🎉 🐙

I know this is an un-implemented feature in jsdom.

I was actually shocked and couldn't believe that it was, because well....

The internet was made so people can submit forms...

But it's true: jsdom/jsdom#1937

And i understand why, Domenic said it was a massive undertaking.

So this is technically not @testing-library/user-event's fault.

What can we do to make this experience better?
Can you think of a way that testing library can help here?

I thought maybe we can implemented some workaround in the code like creating a userEvent.submit utility which handles this special case without triggering jsdom unimplemented submit , or maybe explain the problem and how to submit forms with a click on the submit button without error logs?

Because right now, my ci logs are spammed with ungodly amount of these error logs, and i want to keep my CI logs clean, lean and inspectable while also taking care not to mute and nuke important error logs coming from my tools.

I know that it doesn't actually fail anything because it's not a real error but just a console error, but I dove quite deep in the rabbit hole to try and find some workarounds.

Some workarounds involved:

  1. mocking the virtual console in the test - i don't like this. i don't want to ask my users to workaround such a trivial case of submitting a form the solution has to be at the infrastructure level.
  2. creating a wrapper jsdom environment and muting the jsdom submit errors. This might be the solution but it feels also a bit shaky since i'm muting an error which actually tells me something is un-implemented. if someone where to use submit anywhere it won't work and no error would appear.
  3. fire submit event directly on the form - this is wrong imho because it goes against the testing-library philosophy of testing like a real user and the whole reason user-events was created in the first place. users don't go submitting forms programmatically, the click on the submit button.

I feel like jest+jsdom+user_events should be a very common pattern. Possbily the most common pattern.
And submitting forms, is surely the most common action to do on the web.
And right now, this very popular and modern combo has an error log when you submit a form the right way.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingneeds assessmentThis needs to be looked at by a team member

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions