Instalación de Jest con TypeScript y MS Visual Studio Code

0
3251

Este tutorial forma parte de una cadena de tutoriales en las que pretendo simplemente probar tecnologías actuales.

Antes de empezar me gustaría que revisases la serie de tutoriales relacionados:

 

y ver este video de 2 minutos para entender dónde estamos y a dónde vamos

Hay que aprender en esta vida que hay una diferencia importante entre simplemente programar y desarrollar en un entorno colaborativo profesional de gente altamente cualificada.

El software es extremadamente caro de construir y tedioso de mantener. Además, estamos en una época en la que muchos los programadores tienen una sed insaciable de aprender lo último que ha salido, la moda, por lo que o satisfaces esa necesidad o pronto se marchan a otra empresa o desean construir lo mismo o cosas similares con alguna tecnología nueva (esto a algunos se les va de las manos).

Entonces, una organización que se ha dejado una millonada en construir sus soluciones, en el caso de que quiera amortizarlas en años, necesita que ciertas garantías de no romper cosas importantes cuando alguien toque el código, esa misma persona hizo u otra que probablemente ni conozca en contexto ni esas tecnologías específicas (por nuevas o viejas).

Los repositorios nos pueden garantizar que tenemos todas las versiones de código. La integración continua y despliegue continuo nos puede garantizar que no dependo de una persona (y su conocimiento) para poner software en producción. También nos garantiza que lo que tengo en producción coincide con el código que construí. No os podéis imaginar los desastres que hay en organizaciones porque el código pasa entre entornos y no se sabe qué hay realmente en cada sitio.

Ahora bien, necesitamos asegurarnos que los algoritmos y funciones a nivel atómico devuelven lo que se espera de ellos. ¿Tú crees que alguien se va a acordar dentro de unos días, semanas o meses de todos los escenarios de prueba? Aunque los documentes, y tengas un equipo dedicado, es algo dependiente de personas y desperdicio, porque una vez cambiado el código otra vez hay que probarlo todos.

Entonces parece razonable que las pruebas, muchas de ellas, están integradas en la propia construcción de software.

Aquí hay que hablar también de distintos niveles de prueba como son unitarias, integradas, de regresión funcional, etc.

Empecemos por lo más sencillo de construir (porque depende del propio programador) y rentable, son las pruebas unitarias.

Si has leído algo de XP o programación extrema verás que es algo importante.

Primero vamos a instalar los productos y configurar nuestro entorno para utilizar Jest con TypeScript en nuestro MS Visual Studio Code y luego hablaremos un poco de TDD (Diseño Dirigido por Test) y dejaremos la base para programar cosas más reales.

Pero recordar, que  esto es una cadena de tutoriales y que todavía nos quedará instalar software para que estas labores de compilar, formatear, empaquetar, ejecutar test y desplegar se realicen automáticamente.


Mi equipo es Mac

macOS Catalina
Versión 10.15.2

MacBook Pro (15-inch, 2018)
Procesador 2,9 GHz Intel Core i9 de 6 núcleos
Memoria 32 GB 2400 MHz DDR4
Gráficos Intel UHD Graphics 630 1536 MB


 

Voy a tirar de este tutorial para montar el mío. Os recomiendo que si os iniciáis en TypeScript lo tengáis cerca porque habla de muchas cosas interesantes.

https://basarat.gitbook.io/typescript/intro-1/jest

Para instalar Jest voy a utilizar npm. Id también a la página oficial de TypeScript porque, como suele pasar en este mundo del desarrollo, todo cambia tan deprisa que es posible que en breve estas instrucciones estén obsoletas.

https://jestjs.io/docs/en/getting-started

Ejecutamos el comando de instalación npm para Jest.

La instalación me da errores porque me dice que mi Mac necesita instalar otras herramientas de línea de comando. Le digo que sí y se tira un buen rato descargando software.

Una hora y cuarto aparentemente pero luego curiosamente se reduce a unos 20 minutos (supongo que por la conexión a red)

Por si las moscas, me voy dentro de MS Visual Studio Code, a mi proyecto y abro un terminal y ejecuto el comando de instalación.

Mientras instala, voy creando la estructura de ficheros que vamos a necesitar para decirle a Jest donde buscar los ficheros.

Fijaos que voy a crear una carpeta test colgando de src.

La gracia de programar/diseñar con TDD es que si quiero hacer una función que sume, primero construyo un test que invoque a la función suma y compruebe que retorna lo que debe.

Como todavía ni he creado la función suma, debe dar un error.

Entonces, tengo que irme a mi carpeta de código y escribir la función suma, que ya compilará y pasará el test.

Posteriormente me debería preguntar cómo encaja ese código con el que ya tengo y refactorizar. Aunque esto, es ya otra guerra que requiere de estudio,

Os recomiendo comprar este libro que me parece francamente bueno. Yo voy rápido y me tocará leerlo más despacio.

https://softwarecrafters.io/cleancode-solid-testing-js

En la página 92 podéis encontrar información respecto a los test con Jest.

Bueno, al lío.

Tenemos que crear y revisar algunos ficheros tsconfig.json para estar seguro de que nuestros trayectos están incluidos.

 

{
"compilerOptions": {"outDir": "salida"},
"include": [
  "src/*", "test/foo.test.ts"
]
}

En el fichero package.json indicamos que los test son con Jest

{
  "test": "jest"
}

En jest.config.js nos aseguramos que encuentra el trayecto de nuestros fichero

module.exports = {
  "roots": [
    "<rootDir>/src" 
  ],
  "testMatch": [
    "**/__tests__/**/*.+(ts|tsx|js)",
    "**/?(*.)+(spec|test).+(ts|tsx|js)"
  ],
  "transform": {
    "^.+\\.(ts|tsx)$": "ts-jest"
  },
}

En nuestro fichero de test aseguraos que encuentra la fuente de la función (en el directorio superior). Lo bueno de los IDEs es que cuando mováis ficheros os mueve estas dependencias automáticamente.

Y ya tenemos todo montado.

Cómo tenemos el control de versiones instalado con GitHub, cuando os funciones todo, hacer un commit (y le ponéis un comentario ilustrativo) y ya nos olvidamos. Siempre podremos rescatar el proyecto de G>itHub (su haces push, recordar)

Ahora solo tenemos que ejecutar npx jest –watch y levantará el entorno de pruebas. Tarda un poquito para después ya es interactivo y cada vez que grabes el fichero se actualizan los test en menos de un segundo.

Vemos que ya han pasado los test y que tenemos opciones del menú.

Hago cambios para que comprobéis lo interesante que es: nos dice todo lo que estamos haciendo mal.

Bueno, ahora que hemos jugado un poco con Jest (sin pararnos demasiado) tendríamos que plantearnos muchas más cosas:

  • Estructura de carpetas.
  • Nombre de las variables, clases, interfaces.
  • Estructura del propio test: secciones de inicialización, invocación y comprobación
  • ¿Qué debe probar y qué no? A ver si vamos a estar probando las APIs de terceros o del propio lenguaje.
  • Las diferencias entre lo que es nuestro sistema y el de terceros.
  • Conceptos de Mock.

Carlos Blé acaba de sacar su nuevo libro Diseño Ágil con TDD. Afirmo rotundamente que un buen profesional tiene que dedicar muchas horas a esto.

https://www.carlosble.com/libro-tdd/?lang=es

Ahora nos siguen quedando tareas como instalar un gestor de ciclo de vida de código, formateador, etc.

Aquí te dejo el enlace al siguiente tutorial:

Instalación de Prettier en MS Visual Studio Code

DEJA UNA RESPUESTA

Por favor ingrese su comentario!

He leído y acepto la política de privacidad

Por favor ingrese su nombre aquí

Información básica acerca de la protección de datos

  • Responsable:
  • Finalidad:
  • Legitimación:
  • Destinatarios:
  • Derechos:
  • Más información: Puedes ampliar información acerca de la protección de datos en el siguiente enlace:política de privacidad