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

  • I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

https://github.com/samit4me/antd-testing-form

Steps to reproduce

  • git clone
  • yarn
  • yarn test

What is expected?

All tests to pass

What is actually happening?

AntForm.test.js is failing as onFinish is never being triggered.

Environment Info
antd 4.0.0-rc.3
React 16.12.0
System Ubuntu 18.04.3 LTS
Browser Chrome 80

You will see Form.js and AntForm.js which are both the same, one written with Ant components and the other with native DOM elements.

Form.test.js appears to be working fine. AntForm.test.js is failing as clicking the submit button is not triggering onFinish.

If you do a yarn start you’ll see that both forms work in a browser and if you run these tests in a codesandbox they also work, which I think is the case because Jest is running them tests in a browser.

At a guess it might have something to do with the matchMedia mocking inside /src/setupTests.js, but I’m unsure what else to try. At the moment it doesn’t seem possible to use antd create-react-app testing-library together which is a real shame as these are 3 excellent libraries.

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Comments: 15 (1 by maintainers)

Most upvoted comments

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 👍

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();