Saltar al contenido principal

Consideraciones sobre fireEvent

[Traducción Beta No Oficial]

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Interacciones vs. eventos​

Siguiendo los Principios Rectores, tus pruebas deben asemejarse lo más posible a cómo los usuarios interactúan con tu código (componente, página, etc.). Teniendo esto presente, debes saber que fireEvent no replica exactamente cómo el usuario interactúa con tu aplicación, aunque es suficientemente preciso para la mayoría de escenarios.

Considera fireEvent.click, que crea un evento de clic y lo despacha en el nodo DOM especificado. Esto funciona correctamente en la mayoría de situaciones cuando solo quieres probar qué ocurre al hacer clic en tu elemento, pero cuando el usuario realmente hace clic en tu elemento, estos son los eventos que típicamente se disparan (en orden):

  • fireEvent.mouseOver(element)

  • fireEvent.mouseMove(element)

  • fireEvent.mouseDown(element)

  • element.focus() (si ese elemento puede recibir foco)

  • fireEvent.mouseUp(element)

  • fireEvent.click(element)

Y luego, si ese elemento resulta ser hijo de una etiqueta label, también moverá el foco al control de formulario que la etiqueta referencia. Así que aunque tu objetivo real sea probar el manejador de clics, al usar simplemente fireEvent.click estás omitiendo varios otros eventos potencialmente importantes que el usuario dispara durante el proceso.

Repetimos: en la mayoría de casos esto no es crítico para tus pruebas y la compensación de usar simplemente fireEvent.click vale la pena.

Alternativas​

Describiremos algunos ajustes sencillos para tus pruebas que aumentarán tu confianza en el comportamiento interactivo de tus componentes. Para otras interacciones, quizá quieras considerar usar user-event o probar tus componentes en un entorno real (ej. manualmente, automáticamente con cypress, etc.).

Keydown​

Un evento keydown se despacha en el elemento con foco actual, el elemento body o el document. Siguiendo esto, deberías preferir

- fireEvent.keyDown(getByText('click me'));
+ getByText('click me').focus();
+ fireEvent.keyDown(document.activeElement || document.body);

Esto también probará que el elemento en cuestión puede recibir eventos de teclado.

Focus/Blur​

Cuando un elemento recibe foco, se despacha un evento focus, el elemento activo en el documento cambia y el elemento previamente enfocado pierde el foco (blur). Para simular este comportamiento puedes reemplazar fireEvent con un enfoque imperativo:

- fireEvent.focus(getByText('focus me'));
+ getByText('focus me').focus();

Un efecto secundario positivo de este enfoque es que cualquier aserción sobre eventos focus disparados fallará si el elemento no puede recibir foco. Esto es especialmente importante si realizas posteriormente un evento keydown.