ASYNCTSTZONESPEC est nécessaire pour l'ASYNC - Angular=
L'application a été construite sur Angular v4 et a été progressivement mis à jour avec chaque libération jusqu'à présent. Actuellement nous sommes sur Angular v7 Et enfin, le PDG a accepté de rédiger un test de l'unité alors que ce n'était pas le cas auparavant.
Je viens de créer une spécification simple pour simplement commencer avec les tests et commencer à la mettre en œuvre tout au long du projet, mais vous êtes coincé pendant deux jours avec l'erreur suivante:
AsyncestzonesPEC est nécessaire pour l'assistant de test ASYNC () mais ne pouvait pas être trouvé. Assurez-vous que votre environnement inclut la zone.js/dist/async-> test.js
Tout en googling pour l'erreur ci-dessus, j'ai trouvé des réponses mais qui était liée à Wallaybyjs mais plutôt spécifique à angulaire.
J'ai essayé de reproduire le problème avec la toute nouvelle installation du projet angular mais ne pouvait pas vraiment. Cela pourrait être question avec certaines dépendances requises pour manquer d'exécuter des tests sur Angular 7.
Voici le test.ts fichier:
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
import 'zone.js/dist/long-stack-trace-zone';
import 'zone.js/dist/proxy.js';
import 'zone.js/dist/sync-test';
import 'zone.js/dist/jasmine-patch';
import 'zone.js/dist/async-test';
import 'zone.js/dist/fake-async-test';
import { getTestBed } from '@angular/core/testing';
import {
BrowserDynamicTestingModule,
platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';
// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
declare const __karma__: any;
declare const require: any;
// Prevent Karma from running prematurely.
__karma__.loaded = function () {};
// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting()
);
// Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);
// And load the modules.
context.keys().map(context);
// Finally, start Karma to run the tests.
__karma__.start();
et Package.json:
{
"name": "frontend",
"version": "0.1.2-7",
"appVersion": "2.104",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"build-staging": "bash build-staging.sh",
"build-production": "bash build-production.sh",
"compodoc": "npx compodoc -p src/tsconfig.app.json"
},
"private": true,
"dependencies": {
"@angular-devkit/build-angular": "^0.13.9",
"@angular/animations": "7.0.3",
"@angular/common": "7.0.3",
"@angular/compiler": "7.0.3",
"@angular/core": "7.0.3",
"@angular/forms": "7.0.3",
"@angular/http": "7.0.3",
"@angular/platform-browser": "7.0.3",
"@angular/platform-browser-dynamic": "7.0.3",
"@angular/router": "7.0.3",
"@fortawesome/fontawesome-free": "^5.9.0",
"@mobiscroll/angular": "^4.7.3",
"@ng-bootstrap/ng-bootstrap": "^4.2.1",
"@ngx-translate/core": "^11.0.1",
"@ngx-translate/http-loader": "^4.0.0",
"angular2-virtual-scroll": "^0.4.16",
"core-js": "^2.6.9",
"moment": "^2.22.2",
"ng-block-ui": "^2.1.5",
"ng2-charts": "^1.6.0",
"ngx-infinite-scroll": "^7.2.0",
"ngx-lazy-load-images": "^1.3.1",
"rxjs": "^6.5.2",
"rxjs-compat": "^6.5.2",
"zone.js": "^0.8.29"
},
"devDependencies": {
"@angular/cli": "7.0.5",
"@angular/compiler-cli": "^7.2.15",
"@angular/language-service": "7.0.3",
"@compodoc/compodoc": "^1.1.9",
"@types/jasmine": "^2.8.16",
"@types/jasminewd2": "~2.0.2",
"@types/node": "^10.14.10",
"codelyzer": "^4.4.2",
"jasmine-core": "~3.3.0",
"jasmine-spec-reporter": "~4.1.0",
"karma": "^4.1.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^2.0.5",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^1.4.2",
"protractor": "^5.4.2",
"ts-node": "~7.0.1",
"tslint": "~5.7.0",
"TypeScript": "3.1.6"
}
}
Voici le component Spec:
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { InsuranceComponent } from './insurance.component';
import { CartModule } from '../../cart/cart.module';
import { SharedModule } from '../../shared/shared.module';
import { CommonModule } from '@angular/common';
import { MbscModule } from '@mobiscroll/angular';
import { FormsModule } from '@angular/forms';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { PipeModule } from '../../pipe/pipe.module';
import { InfiniteScrollModule } from 'ngx-infinite-scroll';
import { InsuranceRoutingModule } from '../insurance-routing/insurance-routing.module';
import { InsuranceSearchItemComponent } from '../insurance-search-item/insurance-search-item.component';
// tslint:disable-next-line:max-line-length
import { InsuranceSearchItemDetailsComponent } from '../insurance-search-item/insurance-search-item-details/insurance-search-item-details.component';
describe('Insurance Component', () => {
let component: InsuranceComponent;
let fixture: ComponentFixture<InsuranceComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
CartModule,
SharedModule,
CommonModule,
MbscModule,
FormsModule,
NgbModule,
PipeModule,
InfiniteScrollModule,
InsuranceRoutingModule
],
declarations: [InsuranceComponent, InsuranceSearchItemComponent, InsuranceSearchItemDetailsComponent]
}).compileComponents();
fixture = TestBed.createComponent(InsuranceComponent);
component = fixture.componentInstance;
fixture.detectChanges();
}));
it('should create', () => {
expect(component).toBeTruthy();
});
});
Toute aide serait appréciée beaucoup. Merci
J'utilise cette commande afin de tester un fichier uniquement:
ng test --include somecomponent.spec.ts
Vous allez avoir des problèmes avec le --main Option _ @ Clean-Code a indiqué.