¿Cómo configurar Jest en Angular?

¿Por qué usar Jest en Angular?

Para cualquiera que esté empezando en el mundo de las pruebas puede ser un tanto abrumador debido a que si bien tenemos mucha información disponible en la web acerca de cómo hacerlos, en el caso de Javascript tenemos diferentes opciones y sin un adentramiento en el mundillo, difícilmente podremos elegir basándonos en nuestro nivel y requerimientos.

Jest es un marco de prueba de JavaScript mantenido por Facebook, Inc. con un enfoque en la simplicidad. Funciona con proyectos que utilizan: Babel, TypeScript, Node.js, React, Angular, Vue.js y Svelte. Su objetivo es funcionar de forma inmediata y sin configuración. https://jestjs.io/

Jest nos permitirá ejecutar nuestras pruebas mucho más rápido y sin necesidad de un navegador y su API extiende de Jasmine, es decir que su sintaxis es muy similar y nos permitirá un sumergimiento rápido en su sencilla sintaxis.

Instalación

Primero vamos a instalar jest, @types/jest para sus tipos y jest-preset-angular que es una librería que nos da una configuración preestablecida de Jest para Angular, por su puesto dejaré por acá el repositorio para que puedan ir a darle un vistazo. https://github.com/thymikee/jest-preset-angular

npm install -D jest jest-preset-angular @types/jest

Eliminar Karma y Jasmine

Necesitamos deshacernos de aquellos paquetes que no necesitaremos y que nos puedan generar algún conflicto.
npm uninstall karma karma-chrome-launcher karma-coverage-istanbul-reporter karma-jasmine karma-jasmine-html-reporter @types/jasmine @types/jasminewd2 jasmine-core jasmine-spec-reporter

Cabe destacar que esta guía es si deseas iniciar o migrar a Jest, en caso de que quieras mantener tanto Jasmine como Jest, la configuración se puede complicar y no es el objetivo de este post.

Luego de esto necesitamos eliminar el archivo test.ts que está dentro de la carpeta src y agregar algunos cambios en nuestro tsconfig.spect.json, tu archivo debe quedar similar a este a menos de que ya tengas configuraciones personalizadas, de cualquier forma fíjate en los comentarios:

{
    "extends": "./tsconfig.json",
    "compilerOptions": {
        "baseUrl": "./src",
        "outDir": "./out-tsc/spec",
        "types": [
            "jest", //cambiar esta línea de jasmine a jest
            "node"
        ],
        "experimentalDecorators": true, // agregar
        "emitDecoratorMetadata": true, // agregar
        "paths": { // esta sección es en caso de que uses paths 
            "@app/*": [
                "app/*"
            ],
            "@env/*": [
                "environments/*"
            ]
        }
    },
    "files": [ // eliminar la referencia a test.ts ya que lo eliminamos
        "src/polyfills.ts"
    ],
    "include": [
        "src/**/*.spec.ts",
        "src/**/*.d.ts"
    ]
}

Luego de esto debemos ir a nuestro angular.json en la sección architect eliminar la actual configuración de test:

...
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          }
        }
...

Configuraciones finales

Luego de esto vamos a agregar el archivo setupJest.ts a la raíz de nuestro proyecto con el siguiente contenido:

import 'jest-preset-angular';

Básicamente esto extiende la configuración para Jest de nuestra librería jest-preset-angular.

Con esto solo nos quedaría configurar nuestro package.json y podremos comenzar a escribir nuestras pruebas usando Jest. Así que vamos a nuestro package.json y agregamos lo siguiente al final:

    "jest": {
        "preset": "jest-preset-angular",
        "roots": [
            "<rootDir>/src"
        ],
        "moduleNameMapper": { // este apartado es sólo si usas paths aliases
            "@app/(.*)$": "<rootDir>/src/app/$1",
            "@env/(.*)": "<rootDir>/src/environments/$1"
        },
        "setupFilesAfterEnv": [
            "<rootDir>/setupJest.ts"
        ],
        "testPathIgnorePatterns": [
            "<rootDir>/node_modules/",
            "<rootDir>/dist/",
            "<rootDir>/src/test.ts"
        ],
        "globals": {
            "ts-jest": {
                "tsConfig": "<rootDir>/tsconfig.spec.json",
                "stringifyContentPathRegex": "\\.html$"
            }
        }
    }

Ten en cuenta que el "moduleNameMapper" se agrega solo cuando usas paths aliases y debes configurarlo según tu configuración en tsconfig.spec.json.
Luego modificamos nuestros scripts para pruebas

        "test": "jest",
        "test:coverage": "jest --coverage",

Con esto configurado ya seríamos capaces de ejecutar nuestras pruebas usando
npm test
y
npm test:coverage para obtener un reporte de cobertura de nuestras pruebas

Instando Jest Runner para vscode

Esta genial extension para vscode nos permitirá correr nuestras pruebas de forma aislada, es decir podemos ejecutar sólo la que queremos desde el propio editor. Vamos a extensiones de vscode y buscamos Jest Runner, el primero de la siguiente imágen.

Luego de esto en nuestras pruebas nos aparecen enlaces para correrlas o debug:

Recomendaciones

Esta guía fue solo para configurar Jest con Angular, si son tus primeros pasos te sentirás perdido en el desierto en este mundo de las pruebas. De cualquier forma voy a recomendar un repositorio que en lo personal me ayudó muchísimo para tener ideas generales de cómo debo probar mi código. https://github.com/goldbergyoni/javascript-testing-best-practices

Espero que este post les haya servido y cualquier detalle que se haya pasado por alto por favor déjalo en los comentarios, estaré atento a cualquier feedback. También si desean que haga más contenido acerca de pruebas, déjamelo saber y haré mi mejor esfuerzo por compartir el camino que he seguido.