jest tutorial javascript unit testing using jest framework
En este tutorial de Jest, aprenderemos sobre varias funciones de Jest, Jest Matchers y cómo usar el marco de Jest para las pruebas unitarias de JavaScript:
Jest es un marco de pruebas de Javascript creado por Facebook.
Está diseñado principalmente para aplicaciones basadas en React (que también está construido por Facebook), pero podría usarse para escribir escenarios de automatización para cualquier base de código basada en Javascript.
En este tutorial de prueba de Jest, aprenderemos sobre varias características de Jest, sus comparadores y veremos cómo podemos usar Jest con un ejemplo de principio a fin. También exploraremos sobre la cobertura de código usando Jest.
Lista de tutoriales en esta serie JEST
Tutorial #1: Tutorial de Jest: pruebas unitarias de JavaScript con Jest Framework
Tutorial #2: Cómo probar aplicaciones React usando Jest Framework
Tutorial #3: Configuración de Jest y depuración de pruebas basadas en Jest
Lo que vas a aprender:
- Introducción a las pruebas Jest
- Jest Framework para pruebas unitarias de JavaScript
- Hay Matchers
- Ganchos de broma: instalación y desmontaje
- Conclusión
Introducción a las pruebas Jest
Algunas de las ventajas / características de Jest se detallan a continuación:
- Requiere configuración cero.
- Rápido: Las pruebas de broma se ejecutan en paralelo, lo que a su vez reduce en gran medida el tiempo de ejecución de la prueba.
- Cobertura de código incorporada: Jest admite la cobertura de código lista para usar: esta es una métrica muy útil para todas las canalizaciones de entrega basadas en CI y la eficacia de prueba general de un proyecto.
- Pruebas aisladas y en espacio aislado: Cada prueba de Jest se ejecuta en su propia caja de arena, lo que garantiza que no haya dos pruebas que puedan interferir o impactarse entre sí.
- Potente soporte de burla: Las pruebas de broma admiten todo tipo de burlas, ya sean burlas funcionales, burlas de temporizador o llamadas de API individuales.
- Admite pruebas de instantáneas: Las pruebas de instantáneas son relevantes desde la perspectiva de React. Jest admite la captura de una instantánea del componente de reacción que se está probando; esto se puede validar con la salida real del componente. Esto ayuda enormemente a validar el comportamiento del componente.
Jest Framework para pruebas unitarias de JavaScript
En esta sección, veremos un ejemplo de un extremo a otro para escribir pruebas usando el marco JEST para una función simple de Javascript. En primer lugar, veamos cómo instalar el marco JEST en nuestro proyecto.
Instalación IS
Jest es simplemente un paquete de nodos y se puede instalar usando cualquier administrador de paquetes basado en nodos. Ejemplo, npm o hilo.
Veamos algunos comandos de muestra que se pueden usar para instalar el paquete Jest.
|_+_| |_+_|Para instalar el módulo Jest a nivel mundial, simplemente puede usar la marca '-g' junto con el comando npm. Esto le permitirá usar los comandos Jest directamente sin configurar el archivo del paquete para las pruebas npm.
|_+_|Usar Jest en un proyecto basado en nodos
Para usar Jest en un proyecto basado en nodos, simplemente use los comandos de la sección anterior para instalar el paquete de nodos para Jest.
Siga los pasos a continuación para crear un proyecto de nodo desde el principio y luego instalar Jest en él.
#1) Cree una carpeta / directorio con un nombre como nombre de su proyecto, por ejemplo , myFirstNodeProject
#2) Ahora, usando la terminal o la línea de comando, navegue hasta el proyecto creado en el paso anterior y ejecute el script de inicio npm usando el siguiente comando.
|_+_|#3) Una vez que se ejecuta el comando anterior, solicitará diferentes preguntas / parámetros.
Por ejemplo , el nombre del proyecto, versión, etc. Simplemente siga presionando enter (y acepte los valores predeterminados). Una vez completado, verá un archivo package.json creado en su proyecto. Este es un archivo de configuración obligatorio para cualquier proyecto basado en nodos.
#4) Ahora ejecute el comando para instalar el paquete Jest en el proyecto recién creado usando el siguiente comando.
|_+_|Esto instalará el módulo Jest (así como sus dependencias).
#5) Ahora, tenemos un proyecto de nodo listo con enlaces Jest. Configuremos el script de prueba npm para ejecutar las pruebas de Jest, es decir, cuando se ejecuta el comando 'npm test', el script debe ejecutar todas las pruebas basadas en el marco de Jest.
Para hacer eso, actualice el archivo package.json y agregue una sección de script como se muestra a continuación.
|_+_|El archivo package.json final se verá como se muestra a continuación.
|_+_|Pruebas de escritura para una función de JavaScript
En esta sección, crearemos un código de función Javascript simple para la suma, resta y multiplicación de 2 números y escribiremos las pruebas correspondientes basadas en Jest.
Primero, veamos cómo se ve el código de nuestra aplicación (o función) bajo prueba.
#1) En el proyecto de nodo creado en la sección anterior, cree un archivo js llamado calculator.js con contenido como se muestra a continuación
|_+_|#2) Ahora, cree un archivo de prueba en la misma carpeta para estas pruebas, llamado calculator.test.js - esta es la convención que espera el marco Jest para buscar todos los archivos que contienen pruebas basadas en Jest. También importaremos la función bajo prueba para ejecutar el código en la prueba.
Así es como se vería el archivo con solo importar / requerir declaración.
|_+_|#3) Ahora, escriba pruebas para diferentes métodos en el archivo principal, es decir, suma, diferencia y producto.
Las pruebas Jest siguen las pruebas de estilo BDD, y cada conjunto de pruebas tiene un bloque de descripción principal y puede tener varios bloques de prueba. Además, tenga en cuenta que las pruebas también pueden tener bloques de descripción anidados.
Escribamos una prueba para sumar 2 números y validemos los resultados esperados. Proporcionaremos los números como 1 y 2 y esperamos la salida como 3.
|_+_|Consulte los puntos siguientes con la prueba anterior:
a) El bloque de descripción es una descripción externa para el conjunto de pruebas, es decir, representa un contenedor genérico para todas las pruebas que vamos a escribir para la calculadora en este archivo.
b) A continuación, tenemos un bloque de prueba individual; esto representa una sola prueba. La cadena entre comillas representa el nombre de la prueba.
c) Consulte el código en el bloque de espera: 'esperar' no es más que una aserción. La declaración llama al método de suma en la función bajo prueba con las entradas 1 y 2 y espera que la salida sea 3.
También podemos reescribir esto de una manera más simple para entenderlo mejor.
Vea a continuación, ahora hemos separado la llamada de función y la aserción como 2 declaraciones separadas para hacerlo más conciso.
|_+_|D) Para ejecutar esta prueba, simplemente ejecute el comando ' prueba sobre el nivel del mar ”En la terminal o símbolo del sistema en la ubicación del proyecto.
Verá la salida como se muestra a continuación.
#4) Intentemos algunas pruebas más.
a) Primero, escriba una prueba fallida y vea qué resultado obtenemos. Cambiemos el resultado a un valor incorrecto en la misma prueba que escribimos en la última sección. Vea cómo se ve la prueba.
|_+_|Aquí esperamos que una suma de 1 y 2 devuelva 10, lo cual es incorrecto.
Intentemos ejecutar esto y veamos qué obtenemos.
Puede ver la salida detallada cuando falla una prueba, es decir, qué se devolvió realmente y qué se esperaba y qué línea causó el error en la función bajo prueba, etc.
b) Escribamos más pruebas para las otras funciones, es decir, diferencia y producto.
El archivo de prueba con todas las pruebas se verá como se muestra a continuación.
|_+_|Cuando se ejecutan las pruebas anteriores, se genera la salida dada a continuación.
Video tutorial: ¿Qué es broma?
Hay Matchers
Las aserciones de broma usan comparadores para afirmar sobre una condición. Jest usa comparadores de la API de espera. Se puede hacer referencia al documento de la API de espera aquí.
Repasemos algunos de los comparadores más utilizados junto con las pruebas Jest.
# 1) Igualdad
Estos son los comparadores más utilizados. Se utilizan para comprobar la igualdad o desigualdad y se utilizan principalmente para operaciones aritméticas.
Veamos algunos ejemplos a continuación:
Aquí hemos escrito 2 comparadores usando toBe y not.toBe que son análogos a iguales y no iguales.
|_+_|# 2) Veracidad
Aquí veremos, comparadores de valores nulos, falsos y verdaderos, es decir, valores falsos y verdaderos. Es importante tener en cuenta que todo lo que no sea lógicamente cierto es falso.
Por ejemplo, número 0, nulo, cadena vacía, NaN son todos ejemplos de falsy w.r.t Javascript.
|_+_|# 3) Coincidentes de números
Estos comparadores podrían usarse para operaciones aritméticas generales.
Por ejemplo, mayor que, menor que, mayor que o igual, etc.
Consulte los ejemplos siguientes para obtener más detalles.
|_+_|# 4) Encadenadores de cadenas
Muchas veces necesitamos cadenas para que coincidan con una expresión regular como afirmación en una prueba de unidad. Jest proporciona coincidencias para que las cadenas se comparen con una expresión regular.
|_+_|Tutorial de vídeo: hay Matchers
Ganchos de broma: instalación y desmontaje
Al igual que todos los demás marcos de prueba unitarios basados en xUnit, el marco Jest también proporciona enlaces para los métodos de configuración y limpieza. Estos métodos de enlace se ejecutan antes y después de cada prueba en el conjunto de pruebas o antes y después de la ejecución de testSuite.
Totalmente hay 4 ganchos que están disponibles para usar.
- beforeEach y afterEach: Estos ganchos se ejecutan antes y después de cada prueba en el conjunto de pruebas.
- beforeAll y afterAll: Estos ganchos se ejecutan solo una vez para cada conjunto de pruebas. es decir, si un conjunto de pruebas tiene 10 pruebas, estos ganchos solo se ejecutarán una vez por cada ejecución de prueba.
Veamos un ejemplo: Agregaremos estos ganchos al mismo ejemplo de prueba de sumar 2 números.
¿Qué son las pruebas de regresión en software?
Configuraremos las entradas antes de cada gancho para la ilustración. El archivo de prueba se vería con ganchos de prueba como se muestra a continuación.
|_+_|consejos y trucos
#1) Los informes de la línea de comandos son buenos pero no muy legibles. Hay bibliotecas / módulos disponibles para generar informes de prueba basados en HTML para las pruebas de Jest. Se puede lograr como se muestra a continuación.
- Agregue el paquete de nodo para jest-html-reporter usando el siguiente comando.
- Ahora agregue la configuración de Jest para el reportero en el archivo package.json del proyecto de nodo.
- Una vez configurado ahora, ejecute las pruebas usando el ' prueba sobre el nivel del mar 'Comando.
- Si la configuración es exitosa, debería poder ver un informe basado en Html que se crea en el directorio del proyecto.
# 2) Creación de informe de cobertura de código: La cobertura del código es una de las métricas más importantes desde la perspectiva de las pruebas unitarias. Básicamente, mide qué porcentaje de declaraciones / sucursales están cubiertas para la aplicación bajo prueba.
Jest proporciona soporte listo para usar para la cobertura del código. Para obtener el informe de cobertura de Jest, Hay configuración necesita ser agregado en el package.json expediente.
Agregue la configuración como se muestra a continuación:
|_+_|Una vez realizada esta configuración, intente ejecutar las pruebas con el comando 'Prueba sobre el nivel del mar' , y tu puedes consulte los detalles de la cobertura del código justo debajo de los resultados de la ejecución de la prueba, como se muestra a continuación.
Tutorial en vídeo: Cobertura de bromas y generación de informes HTML
Conclusión
En este tutorial de Jest, analizamos los conceptos básicos del marco de Jest. Aprendimos cómo instalar el marco Jest y vimos cómo se puede usar para probar archivos Javascript simples.
También exploramos los diferentes tipos de comparadores compatibles con Jest y también cubrimos reporteros Html e informes de cobertura de código.
Lectura recomendada
- Configuración de Jest y depuración de pruebas basadas en Jest
- Cómo probar aplicaciones React usando Jest Framework
- Cómo configurar el marco de prueba de Node.js: Tutorial de Node.js
- Tutorial de TestNG: Introducción al marco de TestNG
- Proyecto de muestra sobre pruebas unitarias de front-end con KARMA y JASMINE
- Tutorial de Mockito: Mockito Framework para simular en pruebas unitarias
- Escribir pruebas unitarias con Spock Framework
- Tutorial de JUnit para principiantes: ¿Qué son las pruebas de JUnit?