jest configuration debugging jest based tests
Aprenda sobre Jest Config, depuración y comparación de Jest con otros marcos de prueba de JavaScript, específicamente Jest vs Mocha & Jest vs Jasmine:
En esto Serie de bromas informativas , exploramos todo sobre Probando React Apps, Mocks y Spies usando Jest en nuestro último tutorial.
En este tutorial, aprenderemos más sobre los archivos de configuración de Jest y veremos cómo puede realmente depurar las pruebas de Jest para solucionar problemas de una o más pruebas múltiples.
También exploraremos algunas de las opciones de uso común en el archivo de configuración de Jest que se pueden configurar de forma independiente en un proyecto o las que se pueden agregar como parte de la configuración de package.json.
Usaremos Visual Studio Code para escribir nuestras pruebas de Jest y usaremos una extensión o complemento en VS Code para habilitar el soporte de depuración para las pruebas de Jest.
Además, compararemos los diferentes marcos de prueba de Javascript como Mocha y Jasmine con Jest y comprenderemos los pros y los contras de cada uno.
Lo que vas a aprender:
Hay configuración
La configuración de broma se puede especificar de 3 formas
- A través de una clave en el archivo package.json.
- A través de un archivo jest.config.js: archivo de configuración escrito como un módulo.
- A través de un JSON que podría usarse con la opción como –config flag.
Con todos los enfoques anteriores, puede lograr el mismo resultado. Veamos el primer paso, es decir, agregar la configuración de Jest a través de una clave en el archivo package.json.
En el archivo package.json existente, agregue una nueva clave llamada 'jest'. Esto no es más que un conjunto de pares clave-valor en formato JSON. Todas las opciones de configuración relacionadas con Jest se pueden agregar más a esta sección en el archivo package.json.
Las opciones de configuración más utilizadas se enumeran a continuación.
# 1) Relacionado con la cobertura
recopilar Cobertura, cobertura Umbral, cobertura Reporteros, cobertura Directorio - Estas son las opciones más utilizadas. La cobertura es una métrica importante y garantiza que el código se pruebe con un umbral preestablecido.
Una explicación detallada de cada uno de ellos es la siguiente:
# 1) cobrar Cobertura: Esta opción se utiliza para especificar si queremos que el ejecutor de pruebas de Jest recopile información de cobertura o no. Cuando se establece en verdadero, el corredor Jest recopila la información de cobertura. Con esta opción, la cobertura se recopilará y se mostrará en la consola al final de la ejecución de la prueba, como se muestra a continuación.
# 2) umbral de cobertura: Esta configuración nos permite especificar los valores de umbral para la cobertura en términos de porcentaje. Esto es de gran ayuda cuando la organización o el equipo desea adherirse a un cierto valor mínimo de cobertura sin el cual no se puede insertar o fusionar ningún código en la rama principal.
Veamos cómo se puede utilizar esto.
La cobertura se puede especificar a nivel global, a nivel de archivo o cualquier otra expresión regular. Cuando se especifica a nivel global, todos los umbrales especificados deben coincidir para la combinación de todos los archivos del proyecto.
|_+_|También es posible especificar la cobertura a nivel de archivo, cambiando “global” a nombre de archivo o regex. Las configuraciones de umbral pueden variar según el requisito.
|_+_|# 3) Reporteros de cobertura: Esta configuración se usa para especificar qué reportero le gustaría usar para generar el informe de cobertura. Hay muchos reporteros existentes como paquetes de NPM disponibles que podrían usarse para generar un informe de cobertura al final de la ejecución de la prueba.
# 4) directorio de cobertura: Esta configuración permite al usuario especificar el directorio donde se deben guardar o conservar los informes de cobertura después de su creación.
A continuación se muestra un ejemplo combinado del uso de todos los ajustes de configuración relacionados con la cobertura.
|_+_|Aquí, hemos utilizado 2 reporteros de cobertura, es decir, lcov y text. Lcov es la cobertura de línea de Linux y está presente por defecto y el reportero de 'texto' significa que la salida de cobertura también se mostrará en la consola. El informe de cobertura se generará en la ruta especificada en la configuración de 'directorio de cobertura'.
# 2) Relacionado con simulacros
Los simulacros se utilizan mucho durante las pruebas con Jest. Las dos opciones de configuración siguientes permiten una configuración sencilla y la eliminación de simulaciones.
- autoMocks: Cuando se establece en verdadero, esto simulará todos los módulos que se importan en la prueba de forma predeterminada.
- clearMocks: Cuando se establece en verdadero, esto borrará todas las configuraciones / módulos simulados después de cada prueba, de modo que cada prueba comience con un estado nuevo. Esto también se puede lograr usando testCleanup o el método 'after', pero tenerlo en la configuración lo hace aún más fácil.
# 3) Pruebas relacionadas
# 1) testTimeout: Esta configuración se utiliza para proporcionar una configuración de tiempo de espera difícil para las pruebas en milisegundos. Cualquier prueba que supere este umbral configurado se marcará como fallida debido a la excepción de tiempo de espera.
|_+_|# 2) Globales: Esta configuración se usa para establecer variables globales que deberían estar disponibles con cada prueba.
|_+_|Intentemos usar una variable global en la prueba y veamos si funciona como se esperaba.
|_+_|Después de ejecutar esta prueba, se debe registrar el valor de globalVar.
Controlar aquí para obtener una lista exhaustiva de todas las opciones de configuración.
Video tutorial sobre la configuración de IS
Depurar con Jest
En esta sección, intentaremos comprender cómo podemos depurar pruebas escritas basadas en Jest.
Aplicaremos y comprenderemos 2 formas diferentes en las que podemos depurar las pruebas de Jest.
- Depurador nativo de Node y luego usar Chrome Inspector para depurar las pruebas.
- Usar la configuración de depuración de Visual Studio Code para depurar las pruebas dentro del propio editor de Visual Studio Code. Esta es la forma de depuración más utilizada, ya que Visual Studio Code es el editor predeterminado elegido para la mayor parte del desarrollo de Javascript en estos días.
Cada uno de estos enfoques se explica a continuación en detalle.
# 1) Usando el depurador nativo de Node
Para utilizar el depurador nativo de Node JS, necesitamos insertar la palabra clave 'depurador' en la prueba, donde queremos colocar el punto de interrupción.
Una vez que el ejecutor de la prueba encuentra el depurador comando, pausa la ejecución y si adjuntamos herramientas de depuración de Chrome, entonces podemos depurar el código de prueba (así como la función bajo prueba) usando herramientas de Chrome.
El navegador Chrome es un requisito previo aquí para utilizar el depurador nativo de Node.
Siga los pasos a continuación.
#1) Agregue la palabra clave depurador dentro de la prueba, es decir, en el punto donde le gustaría que la prueba alcance el punto de interrupción, inserte el comando 'depurador'
#2) Ejecute la prueba con el indicador –inspect-brk.
Utilice el siguiente comando para ejecutar la prueba en un modo de punto de interrupción.
|_+_|#3) Adjunta el depurador del nodo en Chrome. Ahora, en el navegador Chrome, navegue a chrome: // inspeccione y conéctese al oyente de destino creado por el paso anterior.
#4) Continúe con la ejecución y verá que el punto de interrupción llega al inspector del depurador de Chrome y puede depurar la pila de llamadas y el estado del objeto en el depurador de Chrome.
Este enfoque de depuración de las pruebas de Jest está bien, pero no es muy fácil de usar, ya que debe seguir cambiando del editor de código a Chrome y viceversa, lo que causa mucha fricción. En la próxima sección, veremos las formas de configurar el depurador dentro del propio editor de Visual Studio Code.
# 2) Uso de la configuración de depuración de VS Code
#1) Seleccione la sección Depurar / Ejecutar del código de Visual Studio en el panel izquierdo.
#2) Ahora, actualizaremos la configuración de depuración para las pruebas de broma. Para hacer eso, agregue una nueva configuración seleccionando la opción de menú.
#3) Una vez que se selecciona la opción de agregar configuración, se abrirá el archivo `launch.json` con el contenido predeterminado en el panel del editor. Elimine el contenido predeterminado y copie el contenido a continuación para crear una configuración de depuración para las pruebas de Jest.
|_+_|#4) Guarde la configuración de contenido recién agregada que se usaría para depurar las pruebas de Jest. Si lee detenidamente la configuración, es similar a lo que hicimos cuando intentamos conectarnos al depurador de Node en las herramientas para desarrolladores de Chrome a través del comando.
|_+_|La ventaja de tener config aquí es que las pruebas se ejecutarán / depurarán como parte del propio Editor (en este caso es VSCode) y no necesitamos conectarnos a ninguna aplicación externa.
#5) Una vez que se crea la configuración de depuración, ahora puede agregar puntos de interrupción a las pruebas y ejecutarlas usando esta configuración RUN. Esto asegurará que la prueba se detenga en los puntos de interrupción y que pueda depurar los valores, el estado del objeto en el punto de interrupción en el archivo de prueba real.
Se pueden agregar puntos de interrupción haciendo clic cerca de los números de línea en los archivos de código.
java cómo revertir una matriz
#6) Una vez que se agrega el punto de interrupción, podemos seleccionar la configuración Ejecutar que agregamos en el paso # 3 para ejecutar / depurar la prueba.
#7) Al seleccionar / hacer clic en el botón Ejecutar, debería poder ver que la ejecución llega al punto de interrupción que se colocó y puede obtener más detalles como valores de entorno / variables, seguimiento de pila, etc.en el punto de interrupción.
Los botones de control de flujo de código / punto de interrupción se pueden usar para pasar al siguiente punto de interrupción o moverse dentro de la función para obtener más detalles.
Video tutorial Él ESDepuración
Hay Mocha Vs Jasmine
En la siguiente sección, compararemos Jest vs Mocha y Jest vs Jasmine en diferentes parámetros y comparaciones de funciones como prueba de instantáneas, facilidad de configuración y capacidades de diferentes marcos.
| Parámetro | Es | Moca | Jazmín |
|---|---|---|---|
| Tipos de prueba compatibles | Se utiliza principalmente para pruebas unitarias. | Examen de la unidad | Pruebas unitarias y pruebas E2E. |
| Prueba de instantáneas | Totalmente compatible: utilizado específicamente para los componentes de React, Jest admite la toma de instantáneas de un componente y su uso para comparar el resultado de la prueba con la estructura del componente guardada. Las instantáneas son una excelente manera de garantizar que las IU no cambien inesperadamente. | Sin soporte | Sin soporte |
| Afirmaciones y coincidencias | Utilice la biblioteca wait.js para los emparejadores. | Compatibilidad con el módulo de aserción integrado de Node y también puede incluir otras bibliotecas de aserción. | En afirmaciones construidas |
| Burlón | Soporte totalmente integrado para Mocks y Stubs en Jest. | No hay soporte integrado para burlarse o golpear. Se puede usar con otras bibliotecas como Sinon para admitir Mocking. | Soporte limitado incorporado usando spyOn. Puede integrarse con otras bibliotecas. |
| Velocidad de ejecución | 4x Las pruebas de broma están aisladas en su propia caja de arena. Por lo tanto, las pruebas de Jest se ejecutan esencialmente en paralelo debido a que proporcionan una mejora considerable en los tiempos de ejecución. | x No admite la ejecución paralela de pruebas. | x No admite la ejecución paralela de pruebas. |
| Configuración y configuración | Muy fácil: no requiere configuración. | ||
| Modo de ejecución de la prueba | Sin cabeza | Sin cabeza | Sin cabeza |
| Resultado de prueba y contexto | Genera una ejecución posterior de contexto enriquecido: Jest proporciona un contexto de prueba detallado para profundizar en lo que ha causado una falla, lo que garantiza una depuración fácil. | El resultado de la prueba no es muy legible y hace que la depuración sea un poco desafiante. | |
| Depuración | El soporte para depuradores nativos de Node también se puede utilizar para depurar dentro de editores como Visual Studio Code a través de una configuración de inicio separada. | Admite depurador de nodo nativo. | Puede usar el corredor de pruebas karma para iniciar pruebas en Chrome y depurar. |
| Cobertura de código | Jest tiene soporte incorporado para cobertura de código. La configuración de cobertura se puede especificar en la configuración de Jest y los informes se pueden generar con cada ejecución de prueba. | Sin soporte incorporado. Proporciona soporte para bibliotecas externas para generar informes de cobertura. | Igual que Mocha |
| Estilo de prueba | BDD Los tres marcos admiten que las pruebas se escriban como un conjunto de especificaciones o especificaciones que las hacen más legibles. | BDD | BDD |
Conclusión
En este tutorial, aprendimos sobre las diferentes formas en que puede depurar sus pruebas de Jest dentro de Visual Studio Code, o en el Inspector de Chrome utilizando el depurador nativo de Node.
También exploramos las opciones de configuración de uso común en el archivo de configuración de Jest. La configuración de Jest ayuda a lograr muchas cosas como cobertura de código, informes Html, configuración de comportamientos simulados, configuración de variables globales, etc.
PREV Tutorial | PRIMER Tutorial
Lectura recomendada
- Tutorial de Jest - Pruebas unitarias de JavaScript usando Jest Framework
- Cómo probar aplicaciones React usando Jest Framework
- Tutorial de Jasmine Framework que incluye Jasmine Jquery con ejemplos
- Construcciones distribuidas: Configuración maestro esclavo de Jenkins
- Técnicas de depuración en Selenium: puntos de interrupción, modo de depuración y más
- Tutorial de pruebas de configuración con ejemplos
- Cómo configurar el marco de prueba de Node.js: Tutorial de Node.js
- Los 25 mejores marcos y herramientas de prueba de Java para pruebas de automatización (Parte 3)