ant-design: Clicking form submit button not triggering onFinish in unit test

Updated: After changing the ‘click’ to ‘submit’ and transferring the expect functions to setTimeout, it works.

  it('should call loginFetch on submit button click', (done) => {
    wrapper.find('button#login-button').simulate('submit');
    setTimeout(() => {
      expect(fetchLoginMocked).toHaveBeenCalledTimes(1);
      done();
    }, 0);
  });

You can also use the waitFor function in react-testing-library which is a little better as it’s more explicit imo

await waitFor(() =>
  expect(fetchSignInSpy).toHaveBeenCalledWith(seedEmail, seedPassword)
);

In our case there were some validations appearing that we didn’t notice and that prevented onFinish from being called. I would recommend anyone with this problem try removing any validations (<Form.Item rules={...}>) from your form to see if that allows your onFinish handler to be called.

If your onFinish handler is called when you remove the validations, then you just have to figure out how to get your validations to play nice with your tests. For example you might have to enter some valid input and then wait for the validation to disappear using awaitFor since validations can be async.

❌ fireEvent.click(getByText("Submit")); ✅ fireEvent.submit(getByText("Submit"));

I also tried fireEvent.click with jest-environment-jsdom-sixteen and still did not work 😞

Strange how fireEvent.click works with native elements such as <form> and <button> but not the antd components <Form> and <Input>.

Thanks for the help 👍

https://github.com/testing-library/react-testing-library/issues/54

modal.find('form').at(1).instance().submit() is worked for me!~

Updated: After changing the ‘click’ to ‘submit’ and transferring the expect functions to setTimeout, it works.

  it('should call loginFetch on submit button click', (done) => {
    wrapper.find('button#login-button').simulate('submit');
    setTimeout(() => {
      expect(fetchLoginMocked).toHaveBeenCalledTimes(1);
      done();
    }, 0);
  });

This is not a solution actually. The expect not fired, when I change .toHaveBeenCalledTimes to 100 it didn’t fail grinning

You might want to mock the timers for that code block to execute.

jest.useFakeTimers();

// your test assertions with timeouts

jest.runOnlyPendingTimers();