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