/angular-latest

Esqueleto de aplicación Angular actualizado

Primary LanguageHTML

angular-latest

Esqueleto de aplicación Angular actualizado

Versiones:

Angular 17.x

Actualizar Angular CLI: sudo npm install -g @angular/cli

Migración a Jest:

  1. Quitar dependencias karma/jasmine

npm uninstall @types/jasmine jasmine-core karma karma-chrome-launcher karma-coverage karma-jasmine karma-jasmine-html-reporter

  1. Añadir dependencias jest y ts-node

npm install @types/jest jest jest-preset-angular ts-node --save-dev

  1. Borrar el nodo "test" del angular.json

  2. Añadir el fichero setup-jest.ts con el siguiente contenido: import 'jest-preset-angular/setup-jest';

  3. Ejecutar npx jest --init. Esto creará el fichero jest.config.ts. Durante la instalación elegimos las siguientes opciones:

✔ Would you like to use Jest when running "test" script in "package.json"? … yes ✔ Would you like to use Typescript for the configuration file? … yes ✔ Choose the test environment that will be used for testing › jsdom (browser-like) ✔ Do you want Jest to add coverage reports? … yes ✔ Which provider should be used to instrument code for coverage? › v8 ✔ Automatically clear mock calls, instances, contexts and results before every test? … yes

Además descomentamos y cambiamos el valor de estas propiedades: - preset: 'jest-preset-angular' - setupFilesAfterEnv: ['/setup-jest.ts']

  1. Modificar el tsconfig.spec.json dejándolo así: { "extends": "./tsconfig.json", "compilerOptions": { "outDir": "./out-tsc/spec", "types": [ "jest" ], "esModuleInterop": true, "emitDecoratorMetadata": true }, "include": [ "src//*.spec.ts", "src//*.d.ts" ] }

  2. Adaptar los ficheros *.spec.ts para que los tests sean compatibles con standalone (si es que la aplicación es standalone, obviamente)

import { ComponentFixture, TestBed } from '@angular/core/testing'; import { provideRouter } from '@angular/router'; import { AppComponent } from './app.component';

describe('AppComponent', () => { let component: AppComponent; let fixture: ComponentFixture;

beforeEach(() => { TestBed.configureTestingModule({ imports: [AppComponent], providers: [provideRouter([])], });

fixture = TestBed.createComponent(AppComponent);
component = fixture.componentInstance;

});

it('should create the app', () => { expect(component).toBeTruthy(); }); });

  1. Modificar/añadir los scripts npm en el package.json: "test": "jest --transformIgnorePatterns "node_modules/(?!@toolz/allow)/" --env=jsdom --verbose", "test:watch": "jest --transformIgnorePatterns "node_modules/(?!@toolz/allow)/" --env=jsdom --watch"