José Luis Olivares
If you appreciate my effort, please endorse my skills on Linkedin
Angular CLI de manera oficial ha provisto soporte para utilizar Jasmine y Karma como herramientas para la realización de pruebas unitarias. A partir de Angular 16, Karma ha quedado obsoleto y se insta a la comunidad a utilizar frameworks de unit testing que ofrezcan mejor performance, como es el caso de Jest.
1. Remover Jasmine y Karma (Remove Jasmine and Karma).
En VS Code, abrir una terminal en la ruta de la carpeta del proyecto de Angula y ejecutar:
npm remove karma karma-chrome-launcher karma-coverage karma-jasmine karma-jasmine-html-reporter jasmine-core jasmine-spec-reporter @types/jasmine @types/jasminewd2
2. Instalar las dependencias de Jest (Install Jest Dependencies).
npm install --save-dev jest@latest @types/jest@latest ts-jest@latest jest-preset-angular@latest
Nota: Estas dependencias son solo para el ambiente de desarrollo.
3. Crear archivo de configuración (Create configuration file) jest.config.js
El archivo debe crearse en la raíz del proyecto.
Contenido del archivo:
module.exports = {
preset: 'jest-preset-angular',
setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/dist/'],
collectCoverage: true,
coverageDirectory: '<rootDir>/coverage',
coverageReporters: ['html', 'text-summary'],
coveragePathIgnorePatterns: [
'/node_modules/',
'/dist/',
'.mock.ts',
'.module.ts',
'.routes.ts'
],
moduleNameMapper: {
'^src/(.*)$': '<rootDir>/src/$1'
}
};
4. Crear archivo de entorno de pruebas (Create test environment file) setup-jest.ts
El archivo debe crearse en la raíz del proyecto.
Contenido del archivo:
import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
setupZoneTestEnv();
5. Actualizar el archivo (Update the file) package.json
La propiedad que se debe editar es "scripts", agregando los comandos para la ejecución de las pruebas con Jest.
"scripts": {
...
//Contenido generado por default del proyecto Angular
...
"test":"jest",
"test:watch": "jest --watch",
"test:coverage": "jest --coverage"
}
Quedará de la siguiente manera (Result):
6. Modificar el archivo (Modify this file) tsconfig.spec.json
Asegurarse que el archivo esté configurado correctamente para poder utilizar Jest.
Contenido del archivo:
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/spec",
"types": ["jest", "node"]
},
"include": [
"src/**/*.spec.ts",
"src/**/*.d.ts"
]
}
7. Probar que la configuración se realizó exitosamente (Test if the configuration was successful)
Ejecute el comando:
npm run test
Si es un proyecto nuevo (con el contenido inicial generado por Angular) deberá ejecutarse sin errores:
Para desplegar el porcentaje de covertura (Test coverage), ejecute:
npm run test:coverage
Se mostrará un resultado similar al siguiente:
Para ejecutar Jest en modo de detección de cambios (watch mode):
npm run test:watch
https://github.com/joseOlivares/angular-jest
👋 please endorse my skills on Linkedin
🔥 Puedes encontrar más información sobre Jest, en https://jestjs.io/docs/testing-frameworks