Tengo una pequeña aplicación creada en Vanilla JavaScript. Para probar la aplicación, estoy usando Jest y JSDOM . Tengo un botón en la aplicación que elimina una tabla en fila. La prueba se parece a:
it('Table deletes corresponding row when Delete is clicked', () => { const tableCells = document.querySelectorAll('table tbody tr td'); expect(tableCells[1].innerHTML).toBe('Some value'); const firstRowDeleteButton = document.querySelectorAll('table tbody tr button')[1]; firstRowDeleteButton.click(); expect(tableCells[1].innerHTML).toBe('Another value'); // row value should change after original row is deleted. });La prueba anterior falla ya que Jest también recibe el mismo 'Algún valor' al final de la prueba. Por lo tanto, el botón Eliminar no hace clic (tenga la seguridad de que la funcionalidad de eliminación funciona bien, ya que la probé en la aplicación real). Incluso intenté simular un evento de clic como este:
const evt = document.createEvent("HTMLEvents"); evt.initEvent("input", false, true); element.dispatchEvent(evt);Pero esto tampoco funcionó. Entonces, ¿cómo puedo activar el evento de clic en JSDOM?
Sí, esa es una limitación de JSDOM, debe usar algo como https://testing-library.com/docs/ecosystem-user-event
... userEvent.click(firstRowDeleteButton) ... NOTA: los ejemplos en esta página incluyen React pero user-event funciona bien aparte