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)
Updated: After changing the ‘click’ to ‘submit’ and transferring the expect functions to setTimeout, it works.
You can also use the
waitFor
function inreact-testing-library
which is a little better as it’s more explicit imoIn 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 youronFinish
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 usingawaitFor
since validations can be async.❌
fireEvent.click(getByText("Submit"));
✅fireEvent.submit(getByText("Submit"));
I also tried
fireEvent.click
withjest-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!~You might want to mock the timers for that code block to execute.