Depuración en ejercicios de desarrollo Front-end

💡 La mayoría de los ejercicios con acceso web en la profesión de Desarrollador Front-end 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. Examina el texto del error.
2. Dirígete al archivo de pruebas y observa qué pasos realizaron las pruebas antes de la línea donde se ocurrió el error.
3. Añade impresiones de depuración al código para ver los datos de entrada y salida antes de cada condición y para cada función.
4.  Abre el acceso web y la consola del navegador.
5. Reproduce los pasos de las pruebas. La secuencia de pasos y los mensajes en la consola pueden ayudar a encontrar el error.
6. Vuelve 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())`. Agrega llamadas al depurador después de cada acción en las pruebas y vuelve 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 😭

Acude a tu mentor, te ayudará. Para pueda 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.