Jest vs. Jasmine: entornos de testing para Angular

Cursos Empresas Blog Live Conf Precios

Contenido del curso

Introducción

Fundamentos de unit testing en Angular

Testing en servicios

Proyecto

Testing en consultas HTTP

Bonus

Próximos pasos

25
Toma el Curso de Angular: Unit Testing para Componentes
01:04 min

Tomar examen

Jest vs. Jasmine: entornos de testing para Angular

Comentarios

Daniel Meza

Estudiante

Nico. Excelente labor que han hecho con este set de cursos con Angular. Y ahora este set de testing de igual manera con Angular. Sin duda los estoy aprovechando completamente. Y es la primera vez que experimentaré con pruebas... 🙌

Eloy Ortiz

Estudiante

En Angular 15 puede generar la configuración que falta haciendo

ng generate config karma

y luego modificarla según sus necesidades.

Este comando actualiza automáticamente el archivo de configuración angular.json.

Pol Valle

Estudiante

Gracias <3

Cesar Elías Armendariz Ruano

Estudiante

Jasmine: es un framework de pruebas Karma: es un test runner (corre las pruebas)

Karme corre por detras por lo que solo debemos pooner atención en Jasmine donde escribiremos las pruebas.

El framework más famoso de pruebas actualmente es Jest

¿Porqué no se hacen las pruebas en Jest? Angular viene preconfigurado para hacer las pruebas en Jasmine por lo que no se deben preocupar por nada.

Angular maneja muchos patrones por si mismo, por ejemplo con un comando puedes instalar una PWA (progressive web app) o puedes confirgurar un service side rendering.

En framework de testing manejan la misma estructura por lo que no hay que procuparse del framework a utilizar. En especial cuando hablamos de código JS

Para poder inciar seguiremos los siguientes pasos

Crear un proyecto desde el cmd
1. Verifica si tienes instalado el CLI de Angular

	ng --version

Crear el nuevo proyecto

ng new ng-testing-services

//respuesta a las preguntas
yes
scss

Ingresamos al proyecto y lo abrimos en visual studio code

cd ng-testing-services

code .

Nos vamos a fijar en archivos que no nos habiamos fijado previamente
karma.config.js: Es la configuración del test running, por eso tiene un paquete para jasmine y uno para chrome, debido a que las pruebas se realizan contra un navegador, por lo que karma lanza las pruebas contra un navegador. Cabe reslatar que se puede cambiar de navegador
Karma automaticamente va a leer todos los archvios .spec.ts por que son especificaciones de como ese servicio o componente debería funcionar. Aqui se puede encontrar varias pruebas que ya corren

Como correr pruebas

Vamos a la terminal y corremos el siguiente comando

ng test

posteriormente observamos las pruebas corridas en karma

WSL

Si estamos en wsl dentro de windows es necesario instalar la versión estable más reciente de google chrome y hacer unos cambios en el archivo karme.conf.js

dentro del terminar de wsl con el usuario root corremos los siguientes códigos uno por uno

sudo apt update && sudo apt -y upgrade && sudo apt -y autoremove

wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
sudo apt -y install ./google-chrome-stable_current_amd64.deb

google-chrome --version

cambiamos el código de karma.conf.js

    browsers: ['ChromeHeadless'],

corremos las pruebas y visualizamos si funciona

Victor Alfredo Matzar Say

Estudiante

Que tal :), En la versión 15 de Angular se eliminaron algunos archivos de configuración para hacer más fácil el entendimiento del framework para nuevos desarrolladores. Karma.conf.js ya no se crea por default con el ng new, sin embargo lo podemos agregar manualmente, acá el archivo: https://github.com/platzi/curso-angular-unit-testing-servicios/blob/step-1/karma.conf.js . También deberiamos agregarlo al Angular.json en la sección de tests:

"test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "polyfills": [
              "zone.js",
              "zone.js/testing"
            ],
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js", //Add this line :)
            "inlineStyleLanguage": "scss",

Kevin Bueno

Estudiante

Gracias, pienso que fue muy mala decisión la eliminación de estos archivos, al menos deberían agregar un comando al CLI para crearlos automáticamente porque son muy necesarios e importantes

Juan Luna

Estudiante

una cosa, no se si es solo a mi, yo no tengo esos archivos, añadidos ni el WSL, pero con la v15.0 como decis yo hago ng test y los tests se ejecutan, sin problemas en el chrome, y repito no tengo WSL, ni karma.conf.js, sil os han eliminado de todas formas los tests se ejecutan, los habrán integrado de otra forma...

Cristian Danilo Motta Herrera

Estudiante

en windows con wsl en 25 de mayo del 2022, sin problema

Brayan Piñeros Bolivar

Estudiante

Hola , no me corre esos comandos en windows, hay problema por sudo.

Manuel Alberto Goicochea Medina

Estudiante

Recuerda que si usas NVM (node version manager ) en windows debes utilizar estos comandos :

Para crear el proyecto :

npm init @angular@latest [project-name]

Para iniciar el proyecto :

npm start

Para testing :

npm test

Teofilo David Fernandez Ochoa

Estudiante

en mi caso no me genera ese archivo :S de karma.config en angular@15, pero me toco descargar la version 14 y si lo crea, existe alguna forma de ver por q ocurre ?

Jorge Luis Silva Medina

Estudiante

Hola David **Angular ** a partir de la version 15 ya no lo genera. Nos da la libertar de configurarlo a nuestro gusto, puedes usar la versión 15 de Angular y tomar el archivo de configuración del proyecto en el step 1 ó configurarlo por ti mismo. https://karma-runner.github.io/6.4/config/configuration-file.html Estas son los nuevos features que se agregaron a la versión 15. https://levelup.gitconnected.com/angular-15-new-must-know-features-ae392a2baf2d

Este es el archivo usado en el proyecto https://github.com/platzi/curso-angular-unit-testing-servicios/blob/step-1/karma.conf.js

Neo TRAN

Estudiante

Vengo del mundo de react con Testing Library, ¿Habría algún inconveniente de compatibilidad al querer usarlo en Angular?

¿O se recomienda mejor usar Jasmine que ya viene por defecto en Angular?

Allan Alexis Orellana Orellana

Estudiante

Si estan usando angular 15 o superior el ng new ya no incluye ciertos archivos por defecto. Seguir la guia de para añadirlos

Reinaldo Mendoza

Estudiante

Al fin conozco el significado de spec

Sebastian Arrieta Villarreal

Estudiante

¡Hola!

Estoy usando Angular 15 y WSL. Al ejecutar ng test, sale una ventana de Chrome, así sea que le haya colocado en el archivo de configuración como ChromeHeadless.

Josué Eliezer Gómez Soto

Estudiante

Para la parte de los navegadores a utilizar en la configuración de Karma, veo que es un arreglo, por ello me pregunto si puedo utilizarlo como se muestra continuación:

Andrés Quintero Arias

Estudiante

En cuanto a rendimiento de jest vs jasmine hay alguna diferencia? o es solo por uso de mercado que jest es más popular?

Norma Natalia Moreno Espinoza

Estudiante

Hola!

Mira esta tabla de comparación entre ambos. Realmente hay muchas similutudes en lo que ofrecen, dime ¿tú cuál eliges?

¡Nunca pares de aprender! 💚

Yadira Rodriguez Lemus

Estudiante

como se ejecuta en una version de node 12.18.3?

Jessica Silvia Payano Castro

Estudiante

Si al ejecutar ng test tienen este error:

Ejecutar el siguiente comando:

export CHROME_BIN="/mnt/c/Program Files/Google/Chrome/Application/chrome.exe"
```Luego vuelve a ejecutar `ng test` .

José Luis Jiménez

Estudiante

23 04 2024 22:41:58.453:ERROR [launcher]: Cannot start Chrome

Can not find the binary /mnt/c/Program\ Files/Google/Chrome/Application/chrome.exe

Please set env variable CHROME_BIN

23 04 2024 22:41:58.453:ERROR [launcher]: Chrome stdout:

23 04 2024 22:41:58.453:ERROR [launcher]: Chrome stderr:

Hola Comunidad.. estoy teniendo este problema con wsl2.. agradecería cualquier ayuda.

Marcel Solera

Estudiante

Porque se debe usar wsl o una distribución de linux, si puedo correr en node en la terminal de windows

Fernando Rocha Olivera

Estudiante

en javascript manejan la misma estructura, pero el tema no es eso, el tema es que angular maneja formularios, inyección de dependencias, estados entre otros. Por esa razón si el curso es de angular debe ser con Jasmine debido a que es la suit de testing que provee Angular.

Josué Eliezer Gómez Soto

Estudiante

tengo una mac... pero lo siento chicos... prefero mil veces windows y uso la mac solo para ver los videos y uso windows (a veces WSL) para tirar código

Marcel Marin

Estudiante

Si tuvieron el error de 20 11 2023 14:29:37.358:ERROR [launcher]: Cannot start ChromeHeadless

[1120/142937.341178:ERROR:exception_handler_server.cc(361)] getsockopt: Invalid argument (22)

[1120/142937.341904:ERROR:socket.cc(153)] unhandled cmsg -1431655766, -1431655766

la solución está aquí

Deben de usar el chromo de windows y enlazarlo al wsl, en link explican los comados y recuerden cambiar la dirección del chrome de windows por la de ustedes ajustando username y program file

sudo apt update && sudo apt -y upgrade && sudo apt -y autoremove

wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
sudo apt -y install ./google-chrome-stable_current_amd64.deb

google-chrome --version

"test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "polyfills": [
              "zone.js",
              "zone.js/testing"
            ],
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js", //Add this line :)
            "inlineStyleLanguage": "scss",

Introducción

Unit testing para servicios en Angular