CODEWITHSUNDEEP
reactjstypescriptformsjestjsreact-testing-library
Tanu
Tanu

Reputation: 1634

Error: Not implemented: HTMLFormElement.prototype.submit

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.

Upvotes: 39

Views: 27762

Answers (4)

Andy
Andy

Reputation: 1228

I had also a similar issue.
However, for me this was happening because I was using userEvent.click and the solution of placing preventDefault() in the fn didn't work for me since the click event and submit event are different.

I had to switch to fireEvent.submit and that worked without the need to prevent default and be able to test the form submission.

PS: I was using a form to wrap the inputs

Error

   import userEvent from "@testing-library/user-event";

Work

   import {fireEvent} from '@testing-library/react';

This is the basic form implentation

   <form onSubmit={handleSubmit}>
     <input type={'text'} placeholder={'user name'} value={username} onChange={e => setUsername(e.target.value)} />
     <br/>
     <input type={'text'} placeholder={'password'} value={password} onChange={e => setPassword(e.target.value)} />
     <br/>
     <input type={'submit'} disabled={!username && !password} value={'Login'} />
   </form>

And here you can see the implementation of the test to handle the submitted event

it('should handle submit event', async () => {
    const handleSubmitFn = jest.fn();
    render(<Form handleSubmit={handleSubmitFn}/>);

    const username = screen.getByPlaceholderText(/user name/);
    const password= screen.getByPlaceholderText(/password/);
    const submitButton = screen.getByText(/login/i);

    userEvent.type(username, 'myuserbla');
    userEvent.type(password, 'mypwd');

    fireEvent.submit(submitButton)

    await waitFor(() => {
      expect(handleSubmitFn).toHaveBeenCalledTimes(1);
    })
  })

Upvotes: 5

Chief
Chief

Reputation: 963

Adding type="button" to the button element is also effective. This will dismiss that error.

Realised this because I had a save and cancel button. I tested the save first and this error didn't occur but when I tested the cancel the error occurred.

When I came to this answer, reading the first answer gave me a clue and as I was about to add the event.preventDefault() I realised type="button" was missing on the cancel button.

Both buttons are child elements of the form.

Upvotes: -2

doughellowell
doughellowell

Reputation: 691

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! 😅

Upvotes: 56

Derek
Derek

Reputation: 947

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.

Upvotes: 9

Related Questions