TypeScript / Jest

Bienvenidos sean a este post, hoy veremos un framework para hacer testing.

Este es un simple y poderoso framework para unit test de javascript que esta construido en jasmine framework. En el post anterior mencionamos que jasmine lleva mucho tiempo y por lo tanto es muy completo para utilizarlo. Jest mejora a jasmine porque nos facilita su configuracion, asi como tambien provee otras caracteristicas. Otra caracteristica interesante es que puede correrse al mismo tiempo, lo cual mejora nuestros tiempos a la hora de correr los tests, pero necesitaremos un par de elementos antes.

Jest necesita de un entorno npm para poder ser utilizado. Por lo tanto antes de instalarlo debemos crear un directorio que sera para nuestro proyecto y luego ejecutar el siguiente comando dentro de este:

$ npm init

Este comando servira para crear el archivo package.json donde estaran todos los datos para el entorno npm, cuando lo ejecuten les pedira una serie de datos, son todos opcionales pudiendo usar los predeterminados, pero tambien completarlos con lo que crean necesario. Les dejo un ejemplo de los que yo pase:

package name: (32) testing
version: (1.0.0)
description: es de testing para typescript
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)

Con nuestro archivo package.json generado podemos pasar a instalar a jest, para ello debemos ejecutar el siguiente comando:

$ npm install jest --save-dev

Con esto ya lo tenemos instalado y la opcion –save-dev es para que al momento de compilarlo no aparezca en el entorno de desarrollo y no en produccion. Lo siguiente sera instalar los archivos de declaracion, para ello ejecuten el siguiente comando:

$ npm i --save-dev @types/jest

Con nuestro modulo y sus archivos de declaracion instalados, nuestro primer paso sera configurar como se llamara al test. Para ello debemos ir a package.json, busquen la opcion scripts y modificaremos a test de la siguiente manera:

  "scripts": {
    "test": "jest"
  },

Esta opcion es la que almacena los «scripts» que podemos ejecutar con npm donde el primero es el identificador y luego ira lo que ejecutara. En este caso llamara a jest y para ejecutarlo deben hacerlo de la siguiente manera:

$ npm test

Si lo ejecutan no hara nada porque no tenemos proyecto ni test creados, todavia, pero entre todos los mensajes podemos destacar la siguiente linea:

No tests found, exiting with code 1

Es lo que mencionamos anteriormente. Esto es asi porque de manera predeterminada jest busca archivos de la forma *.spec.js, este es un archivo de especificaciones del test, donde el comodin asterisco es para cualquier archivo con esa extension. Por ejemplo si nosotros tenemos un archivo llamado totem.js, su archivo de test sera totem.spec.js. Con esto comentado pasemos a crear unas especificaciones.

Ya vimos que jest es el encargado de buscar tests de javascript y usarlos en nuestro codigo. Si bien podemos usar al compilador de typescript para generar archivos de javascript o podemos usar a ts-jest. Este actua como un puente entre jest y typescript, y se encargara de la compilacion y la integracion con jest por nosotros. De hecho, este compilara y ejecutara los test de typescript sin necesidad de generar los archivos de javascript. Esto significa que podemos escribir unit tests en typescript y ts-jest se encargara de ejecutarlos en jest sin ningun inconveniente. Para instalarlo debemos ejecutar los siguientes comandos en el directorio del proyecto:

$ npm install ts-jest --save-dev

Este se encarga de instalar a jest y como dijimos la opcion –save-dev es para que tambien quede en el entorno de desarrollo y no de produccion. Una vez instalado lo siguiente sera ejecutar el siguiente comando:

$ npx ts-jest config:init

Este se encargara de crear un archivo de configuracion para ts-jest, tal como si usaramos npm init, pero en este sera automaticamente sin nuestra intervencion. Esto generara el archivo jest.config.js en el raiz de nuestro directorio del proyecto. Ejecutemos nuestro ultimo comando:

$ npm install typescript --save-dev

Y por ultimo instalaremos a typescript en nuestro proyecto. Los dos modulos que instalamos los encontraran en el directorio node_modules que se encuentra dentro de este y en este mismo directorio dentro de los directorios que comienzan con arroba (@) se encontraran los archivos de declaracion del respectivo modulo. Con esto ya tenemos todo nuestro entorno preparado para hacer una prueba, lo primero que haremos sera crear el proyecto de typescript y para ello en el directorio raiz ejecuten el siguiente comando:

$ tsc --init

Esto nos genera el archivo tsconfig.json, con esto realizado lo primero que haremos sera crear un nuevo archivo con el nombre de hola.spec.ts y le agregaremos el siguiente codigo:

hola.spec.ts

test("podria ser false", () => {
        expect(true).toBeFalsy();
});

El comando test sera el encargado de realizarlo y para ello recibe dos argumentos. El primero es una etiqueta para identificarlo y el segundo es el test en si. En este caso es una funcion que utiliza a expect la cual recibe un argumento y luego evaluado mediante la funcion toBeFalsy. Esta funcion espera que el valor analizado sea false. Pero en este caso le pasamos un true al expect por lo tanto no es lo que espera la funcion evaluadora. Compilemos y veamos como es la salida:

En este caso nos indico la falla con el color rojo y en que funcion fallo. Esto como comentamos anteriormente es debido a que esperaba un valor false y no lo obtuvo. Observen como nos devolvio un monton de informacion para un codigo realmente simple, piensen que en un codigo mucho mas extenso podemos tener muchisimas mas notificaciones. Vamos a corregirlo y para ello modificaremos el codigo de la siguiente manera:

test("podria ser false", () => {
        expect(false).toBeFalsy();
});

En este caso solo hicimos una sola modificacion como fue cambiar el valor de true a false, el resto sigue siendo lo mismo. Si lo ejecutan veran la siguiente salida:

En este caso nos devolvio un test correcto por lo tanto lo notifico en verde asi como no es necesario mostrar tanta informacion dado que todo esta ok. Este es un caso muy simple para ver como trabaja en un ejemplo que podriamos compararlo al hola, mundo!. Antes de finalizar les dejo todos los archivos que trabajamos en este post:

En resumen, hoy hemos visto jest, como instalarlo, como configurar todo lo necesario,, asi como un ejemplo simple pero donde podemos ver como es la salida en caso de fallo de un test y tambien el caso de cuando todo esta correcto. Espero les haya resultado de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.