Al escribir pruebas RTL, una de las cosas que más confunden a los desarrolladores son los errores crípticos de la función act() registrados en la consola. La función ACT es un gran dolor de cabeza cuando se trata de pruebas.
En la siguiente imagen, puede ver un ejemplo que ocurre después de ejecutar una prueba.
Act Function
Important items
Las actualizaciones de estado inesperadas en los tests son malas.
Imaginemos que estamos tratando de probar un componente muy simple. El objetivo de este componente es mostrar un botón, y cada vez que un usuario hace clic en ese botón, queremos realizar una solicitud de red para ir a buscar algunos datos, tal vez obtener una lista de usuarios y luego mostrar esos usuarios en la pantalla.
Tendremos dos piezas de estado diferentes. Uno podría llamarse ‘ShouldLoad’. Otro podría ser la lista de usuarios que pretendemos obtener eventualmente.
Cada vez que un usuario haga clic en el botón, actualizaremos ‘ShouldLoad‘ para que sea verdadero. Eso hará que se ejecute la función useEffect. Dentro vamos a verificar y asegurarnos de que ShouldLoad sea verdadero. Si es así, iremos a buscar datos. Así que vamos a llamar a esta función imaginaria fetchUsers y cuando obtengamos datos, los usaremos para actualizar el estado de los usuario.
Ahora, si tratamos de escribir un test muy simple sobre este componente, casi puedo garantizarte que probablemente recibiremos una advertencia sobre esa función ACT muy similar a la que acabamos de obtener anteriormente (puedes verlo en la imagen que mostramos en la parte superior de la pantalla).
Entonces, el problema aquí es que después de hacer clic en ese botón, vamos inmediatamente a la siguiente línea de código y tratamos de encontrar todos los diferentes usuarios que presumiblemente hemos obtenido y presentado en la pantalla. Luego, nuestra solicitud de obtención de datos aún estará pendiente. Todavía estamos esperando a que se resuelva. Entonces probablemente no habrá ningún usuario y nuestro test probablemente fallará.
Luego, después de que nuestro test haya fallado, poco tiempo después, esa solicitud de datos simulados podría terminar. Actualizaríamos nuestro estado y luego los usuarios serían visibles en la pantalla.
Entonces, debido a que no esperamos esa actualización de estado porque no esperamos a que terminaran las solicitudes de datos (operación asíncrona), nuestro estado se ha actualizado después de que el test ya falló. Entonces, tuvimos una actualización de estado inesperada.
La función ACT define una ventana en el tiempo donde las actualizaciones de estado pueden (y deben) ocurrir
La función ACT es una función implementada por React DOM. Define una ventana en el tiempo donde una actualización de estado puede y debe ocurrir dentro de una de nuestras pruebas o tests.
Preste atención, no estamos usando React Testing Library. Aquí puedes ver más claramente la ventana en el tiempo que mencionamos anteriormente.
Si se produce alguna actualización de estado en ese período de tiempo, React estará feliz y no veremos ninguna advertencia. Si alguna vez actualizamos nuestro estado fuera de estas pequeñas ventanas, terminaremos viendo la advertencia que acabamos de ver en nuestra terminal porque es una señal de que nuestro estado se actualizó cuando no estábamos realmente preparados para ello.
¡React Testing Library usa ‘act’ detrás de escena por ti!
La biblioteca React Testing utilizará automáticamente la función ACT por ti, totalmente detrás de escena. No tienes que llamar a ACT.
Hemos aprendido acerca de diferentes funciones de consulta como findBy y findAllBy. Señalar que estas funciones findBy son de naturaleza asíncrona. Nos dan un período predeterminado de tiempo, de un segundo, en el que la biblioteca de prueba de React observará la salida de nuestro componente y verá si aparece algún elemento que no está visible o cualquier otra cosa que estemos buscando.
Hay otra función muy similar llamada waitFor. waitFor va a abrir un lapso predeterminado de un segundo y nos permitirá verificar alguna condición dentro de nuestros componentes. También obtenemos las funciones userKeyboard y userClick. Esas dos últimas, son funciones síncronas. No son asíncronos.
Todas estas diferentes funciones van a actuar automáticamente en segudo plano para ti. Entonces, cada vez que usamos la biblioteca React Testing, esta es la forma preferida de usar ACT. No usamos la función ACT directamente. En cambio, tratamos de usar estas funciones que nos dan esta ventana donde nuestro estado puede cambiar de manera segura.
Para resolver las advertencias de ACT, debes usar un ‘finBy’.
Por lo general, no debes seguir los consejos de la advertencia. Entonces, cada vez que comencemos a ver estas advertencias de acción, no vamos a hacer lo que dice nuestra terminal.
Esto es extraordinariamente engañoso porque vas a leer esta advertencia y probablemente vas a hacer una búsqueda en Google para averiguar qué está tratando de decirte la advertencia. Y es posible que encuentre alguna publicación de blog o algún artículo que diga: Ah, sí, cierto, algún código se ve así, o puede que simplemente lea la terminal directamente y diga claramente, necesito llamar a la función ACT.
Cada vez que escribe tus tests mientras usa la biblioteca React Testing no debes agregar una llamada a la función ACT dentro de su prueba, aunque el mensaje dice que debes hacerlo. En su lugar, deberíamos usar una de las funciones de RTL. Y nos referimos a las funciones asíncronas (findBy, findAllBy o waitFor).
Dejar un comentario
¿Quieres unirte a la conversación?Siéntete libre de contribuir!