Testing en Javascript con JEST. Parte 2 de 2

Testing asíncrono

Cuando necesitamos realizar test con funciones asíncronas jest nos ofrece varias opciones, usando callbacks, promesas y async / await.

Callbacks

Por su facilidad de uso empezaremos realizando unos test usando callbacks.

index.js

index.test.js

Como hemos podido ver en el test, estamos enviando como parámetro el argumento done. Este argumento se usa para que jest sepa que hemos terminado y debemos añadirlo al final del test para que no falle.

La siguiente prueba de test asíncronos la vamos a realizar usando promesas.

Promise

Para esta prueba he usado el paquete de npm llamado JSON Server y así crear una API REST en nuestro servidor local.

Para iniciar nuestro servidor de JSON usamos el siguiente comando: json-server db.json

db.json

index.js

index.test.js

Async / Await

Para finalizar los test asíncronos usaremos las funciones async / await. Debemos recordar añadir a la función anónima del test la palabra reservada async.

index.test.js

Si nos fijamos en las funciones async / await no es necesario usar al final el done, ya que al ser una función declarada como asíncrona espera a que se resuelva y una vez resuelta obtiene los datos.

Snapshot testing

Los snapshots nos garantizan que no vaya a ocurrir algún cambio inesperado en nuestra UI.

Comprobamos lo datos que tenemos con lo que estamos trayendo y que no deben de cambiar, ya que esto lo usamos para casos en donde algún dato en particular muy rara vez cambiara.

En caso de que queramos aceptar el cambio añadiremos el parámetro -u.

Una vez ejecutado el test con snapshot, este nos creara una carpeta con el nombre __snapshots__.

Esta fichero es una captura de los datos que le pasamos en el fichero .json (datos.db.json).

La primera vez que ejecutamos el test crea esa captura que se usara para validar.

snapshot.test.js

snapshot.js

enlaces.json

datos.db.json

Puede ocurrir que en algún momento necesitemos añadir una excepción en nuestra snapshot, por ejemplo un dato como obtener la fecha en ese momento.

Nuestro snapshot tendría guardada nuestra captura de la primera vez, pero al realizar otro test posiblemente la fecha sea diferente.

log.test.js

snapshot.test.js.snap

Consola primera vez

Consola resto de veces

Como hemos comprobado el snapshot original es diferente al actual y por eso el test falla.

Si queremos crear una excepción, añadiremos las excepciones dentro del método .toMatchSnapshot().

Es importante que cuando ejecutemos el test con las excepciones usemos el flag -u para que use los nuevo cambios si ya existiese una captura previa.

snapshot.test.js

Integrando en un framework

Para realizar la integración de jest en un framework voy a usar Vue.

Crearemos nuestro proyecto desde cero usando el CLI de Vue con el siguiente comnado: vue create nombre-proyecto.

Con el comando anterior se ha creado un esqueleto básico para un proyecto de Vue.

Si nos fijamos en la estructura podemos ver que dentro del proyecto ya existe una carpeta llamada test.

Dentro están los test unitarios y su configuración para usar jest.

Podemos ver el componente (HelloWorld.vue) y el test (example.spec.js).

De todos los ficheros que podemos encontrar dentro del proyecto deberemos prestar atención a los siguientes:

  • test/unit/.eslintrc.js: Configuración lint para los test.
  • test/unit/example.spec.js: Fichero con los test.
  • ./jest.config.js: Configuració de jest en el proyecto.

example.spec.js (fichero de los test)

Resultado test en la consola

Aunque JEST es mucho mas extenso y tiene más opciones, con este pequeño curso he querido demostrar lo simple que es añadir test a nuestros proyectos.