Depuración en ejercicios de desarrollo frontend

La mayoría de los ejercicios con acceso web en la profesión de Desarrollador Frontend se prueban con la biblioteca Testing Library. En estos ejercicios, se importa una función en las pruebas que inicia la aplicación frontend, y las pruebas simulan el comportamiento del usuario: hacen clic en botones, completan campos de formulario y "leen" mensajes de error.

Cuando las pruebas arrojan un resultado inesperado, se muestra un error que indica el estado del DOM: qué se esperaba y qué se obtuvo. Sin embargo, a veces puede suceder que todo funcione bien en el acceso web, pero las pruebas fallan con un error.

Cómo localizar el error:

1. Examine el texto del error.
2. Vaya al archivo de pruebas y vea qué pasos realizaron las pruebas antes de la línea donde se produjo el error.
3. Agregue impresiones de depuración al código para ver las entradas y salidas antes de cada condición y para cada función.
4. Abra el acceso web y la consola del navegador.
5. Reproduzca los pasos de las pruebas. La secuencia de pasos y los mensajes en la consola pueden ayudar a encontrar el error.
6. Vuelva a ejecutar las pruebas y vea lo que muestra la impresión de depuración en la pestaña OUTPUT.

Cómo ver lo mismo que las pruebas:

Se puede obtener información adicional de las propias pruebas. Con las pruebas de instantáneas, en el archivo de pruebas, se declarará una función `getTree()` que devuelve HTML formateado que las pruebas están "viendo" actualmente. Simplemente imprímelo usando `console.log(getTree())`. Agregue llamadas al depurador después de cada acción en las pruebas y vuelva a ejecutar la verificación. Los resultados se mostrarán en la pestaña OUTPUT.

Cuando se usa Testing Library, la función `screen.debug()` realiza un trabajo similar durante las pruebas, enviando los resultados directamente a la consola:

Depuración completa, pero aún no entiendo la causa del error:

Si estás aprendiendo con un mentor, acude a él; te ayudará a entender. Para que otros miembros de la comunidad puedan entender fácilmente tu pregunta:

1. Explica por qué crees que ocurrió el error.
2. Guarda tu solución y coloca el enlace en el mensaje.
3. Es útil incluir impresiones de depuración en tu solución, ya que esto proporcionará a la comunidad la máxima información para ayudarte a entender.
4. Al formular tu pregunta, sigue nuestras recomendaciones.