Estoy tratando de realizar pruebas unitarias con React Testing Library una función de envío de formularios, sin embargo, mi botón para enviar el formulario está fuera del formulario en sí, pero está vinculado a través del atributo form=... .

Aquí hay una prueba de ejemplo que está fallando:

 it('my test', () => { const formSubmit = jest.fn(() => console.log('/// Form submitted ///')); render(<div> <form id="test-form" onSubmit={formSubmit}> <button type="submit">Inside form</button> </form> <button form="test-form" type="submit">Outside form</button> </div>); // Running this line DOES print the console log correctly // userEvent.click(screen.getByText('Inside form')); // This line DOES NOT print the console log... userEvent.click(screen.getByText('Outside form')); // Clicking the outside button means this also fails. expect(formSubmit).toHaveBeenCalled(); });

¿Hay algo que me estoy perdiendo aquí?

Actualizar

Después de buscar mucho en Google, parece que este problema fue causado por usar una versión anterior de JEST para mis pruebas.

Se notó en este problema de GIT que hubo un problema con versiones anteriores de JSDOM que causó esto.

Es probable que este problema en particular se deba al uso de entornos jsdom más antiguos (a través de una broma). El error se solucionó en jsdom/jsdom#2369, que se publicó en jsdom@12.2.0

Parece que estaba usando "@testing-library/jest-dom": "^5.12.0", pero la actualización a la última ^5.16.2 no parece haber solucionado el problema.