Error: Not implemented: HTMLFormElement.prototype.submit

Question

This is how my test case looks :

const renderCard = ({
  onSubmit = jest.fn(),
}: RenderCardParams = {}) => {
  return render(
        <Card title={title} onSubmit={onSubmit}>
          <Button type="submit">Save</Button>
        </Card>,
  );
}; 

it("should invoke onSubmit when form is submitted", async () => {
      const onSubmit = jest.fn();
      window.HTMLFormElement.prototype.submit = () => {};
      const { getByText } = renderCard({ onSubmit });
      const button = getByText("Save").closest("button");
      if (button) {
        fireEvent.click(button);
      }
      await wait(() => expect(onSubmit).toHaveBeenCalled());
 });

I am receiving "Error: Not implemented: HTMLFormElement.prototype.submit". I tried the solution mentioned here https://github.com/jsdom/jsdom/issues/1937 , but it did not work. I do not want to silence the errors but implement the test correctly. Thank you.

Answer 1

I had a similar issue which was resolved by calling the event.preventDefault() method.

This would need to be called in your 'onSubmit' function i think

const onSubmit = jest.fn(e => e.preventDefault());

edit: woops forgot to invoke it! 😅

Answer 2

I had to mock the implementation of my onSubmit function to clear the error, preventing the default submit behavior.

Give something like this a try:

const onSubmit = jest.fn();


it("should invoke onSubmit when form is submitted", async () => {
      onSubmit.mockImplementation(event => {
        event.preventDefault();
      });

      const { getByText } = renderCard({ onSubmit });
      const button = getByText("Save").closest("button");
      if (button) {
        fireEvent.click(button);
      }
      await wait(() => expect(onSubmit).toHaveBeenCalled());
 });

You can read more about event.preventDefault in React here and here.

Something else that worked for me was using RTL's fireEvent.submit, although you need to get a form element for that to work. Assuming your implementation of Card renders a form in a way that's recognizable by getByRole, you could also try something like this:

fireEvent.submit(screen.getByRole('form'));

That would be in lieu of simulating the button click, which may be acceptable in your case since you seem to be testing form submission rather than the button's behavior.