¿ 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. 활용 가능한 프로젝트: Babel, TypeScript, Node.js, React, Angular, Vue.js 및 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.

설치

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

엘리미나르 카르마 이 자스민

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 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 댓글:

{
    "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": []
          }
        }
...

피날레 구성

Luego de esto vamos 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. 새로운 패키지 .json과 마지막으로 통합할 수 있는 방법은 다음과 같습니다.

    "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 usandonpm test와이npm test:coverage para obtener un reporte de cobertura de nuestras pruebas

vscode용 Instando Jest Runner

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는 vscode 및 buscamos Jest Runner의 확장자이며 먼저 이미지를 제공합니다.



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

추천

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.