Así es como se ve mi caso de prueba:
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()); });Estoy recibiendo "Error: No implementado: HTMLFormElement.prototype.submit". Probé la solución mencionada aquí https://github.com/jsdom/jsdom/issues/1937 , pero no funcionó. No quiero silenciar los errores sino implementar la prueba correctamente. Gracias.
Tuve un problema similar que se resolvió llamando al método event.preventDefault() .
Creo que esto debería llamarse en su función 'onSubmit'
const onSubmit = jest.fn(e => e.preventDefault());editar: ¡woops se olvidó de invocarlo! 😅
Tuve que simular la implementación de mi función onSubmit para borrar el error, evitando el comportamiento de envío predeterminado.
Prueba algo como esto:
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()); });Puedes leer más sobre event.preventDefault en React aquí y aquí .
Otra cosa que funcionó para mí fue usar fireEvent.submit de RTL, aunque necesita obtener un elemento de formulario para que funcione. Suponiendo que su implementación de Card represente un formulario de una manera que sea reconocible por getByRole , también podría intentar algo como esto:
fireEvent.submit(screen.getByRole('form'));Eso sería en lugar de simular el clic del botón, lo que puede ser aceptable en su caso, ya que parece estar probando el envío del formulario en lugar del comportamiento del botón.
Agregar type="button" al elemento button también es efectivo. Esto descartará ese error.
Me di cuenta de esto porque tenía un botón de guardar y cancelar. Primero probé guardar y este error no ocurrió, pero cuando probé cancelar, ocurrió el error.
Cuando llegué a esta respuesta, leer la primera respuesta me dio una pista y cuando estaba a punto de agregar event.preventDefault() me di cuenta de que faltaba type="button" en el botón cancelar.
Ambos botones son elementos secundarios del formulario.