Cómo configurar Jest en Angular 18

Cuando escribimos pruebas en Angular, Jasmine y Karma vienen configurados por defecto como librería de pruebas y test runner, pero el equipo de Angular ha estado trabajando para traer Jest a Angular.

Hoy vamos a experimentar con el Jest Builder para Jest (Experimental) en Angular 17. ¡Empecemos!

Crear la aplicación de ejemplo

Primero, vamos a crear una aplicación de ejemplo usando Angular 17. En mi caso, tengo Angular 15 instalado de forma global, ya que es la versión que utilizo en mi trabajo diario.

La forma más sencilla de crear un proyecto con Angular 17 sin tener que instalarlo globalmente es ejecutarlo mediante npx.

// crear el proyecto 
npx -p @angular/cli ng new lab
 
// generar componente y servicio
npx ng g c components/toaster
npx ng g s services/toaster

Para levantar la aplicación usando npx, ejecuta el siguiente comando: npx ng serve.

Para correr las pruebas en un proyecto de Angular 17 sin instalar nada globalmente, puedes usar el comando npx junto con Jasmine y Karma. Para lograrlo, simplemente ejecuta el siguiente comando: npx ng test.

Nuestro objetivo es usar el Jest Builder, pero antes de dar ese paso, debemos remover Karma y Jasmine de nuestro proyecto.

Eliminar Jasmine y Karma

Primero, vamos a eliminar Jasmine y Karma ejecutando el siguiente comando:

npm remove karma karma-chrome-launcher karma-jasmine karma-jasmine-html-reporter

Configurar el Jest Builder

A continuación, instalamos Jest, sus tipos y el builder en el proyecto:

npm i -D jest @types/jest @angular-builders/jest

Luego, actualiza la sección test en el archivo angular.json para utilizar el builder de Jest:

"test": {
          "builder": "@angular-builders/jest:run",
          "options": {
            "tsConfig": "tsconfig.spec.json",
            "polyfills": ["zone.js", "zone.js/testing"]
          }
        }

Guarda los cambios y vuelve a ejecutar el comando ng test, ahora usando Jest como el test runner por defecto para Angular (experimental).

Recibimos una advertencia porque todavía es "EXPERIMENTAL". Si revisas los tiempos, verás que la versión experimental tarda más que Jasmine (pero, por supuesto, ¡todavía no está optimizada!).

¡Se ve muy bien! Por supuesto, aún debemos esperar un poco para adoptarlo por completo, pero es un excelente avance para Angular. Actualmente, si quieres usar Jest con Angular, puedes utilizar el schematic: https://github.com/briebug/jest-schematic

ng add @briebug/jest-schematic

Puedes seguir el progreso de angular-jest builder o revisar mi proyecto de ejemplo.

¡Que lo disfrutes!