异步需要 AsyncTestZoneSpec - Angular
AsyncTestZoneSpec is needed for the async - Angular
该应用程序基于 Angular v4 构建，并且随着每个版本的发布逐渐更新，直到现在。目前我们正在 Angular v7，最终 CEO 同意编写单元测试，而以前并非如此。
我刚刚创建了一个简单的规范来开始测试并开始在整个项目中实施它，但由于以下错误而卡住了两天：
AsyncTestZoneSpec is needed for the async() test helper but could not be >found. Please make sure that your environment includes zone.js/dist/async->test.js
在谷歌搜索上述错误时，我找到了一些答案，但这些答案与 Wallaybyjs 有关，而是特定于 Angular.
我试图通过 angular 项目的全新安装来重现该问题，但实际上无法重现。这可能是 Angular 7.
上的 运行 测试需要缺少的某些依赖项的问题
以下是 test.ts 文件：
// 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();
和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"
}
}
以下是 component 规范：
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();
});
});
如有任何帮助，我们将不胜感激。
谢谢
要使用 async() 功能，您需要导入 zone-testing。
尝试将 zone-testing 包导入到您的 test.ts 文件中。
import 'zone.js/dist/zone-testing'
可能已弃用以下命令：
ng test --main somecomponent.spec.ts
改为使用：
ng test
要仅 运行 一个特定的 spec 而不是 all，请在您的 describe 和 it 块前加上 f:
fdescribe('whatever', () => {})
我在 Angular 11 升级后收到此错误。
此行必须是 test.ts 中的第一行，在所有其他导入之前：
import 'zone.js/dist/zone-testing'; // zone-testing needs to be first import!
我使用这个命令只为了测试一个文件：
ng test --include somecomponent.spec.ts
如@clean-code 所述，您将遇到 --main 选项的问题。
旁观者测试框架也有同样的问题。
解决方案是，在旁观者导入之前导入 jest-preset-angular。
错误：
import { defineGlobalsInjections } from '@ngneat/spectator';
import 'jest-preset-angular';
正确：
import 'jest-preset-angular';
import { defineGlobalsInjections } from '@ngneat/spectator';
我有类似的问题，但使用 jest 测试框架。
删除所有 karma 和 jasmine 相关内容并安装 jest 相关人员后，您可能会遇到类似的错误
zone-testing.js is needed for the async() test helper but could not be found.
Please make sure that your environment includes zone.js/dist/zone-testing.js
这是我的 setup-jest.ts 文件
import 'jest-preset-angular';
import 'jest-extended';
当我将文件 setup-jest.ts 中的一个导入更改为此
import 'jest-preset-angular/setup-jest';
import 'jest-extended';
现在一切正常。
该应用程序基于 Angular v4 构建，并且随着每个版本的发布逐渐更新，直到现在。目前我们正在 Angular v7，最终 CEO 同意编写单元测试，而以前并非如此。
我刚刚创建了一个简单的规范来开始测试并开始在整个项目中实施它，但由于以下错误而卡住了两天：
AsyncTestZoneSpec is needed for the async() test helper but could not be >found. Please make sure that your environment includes zone.js/dist/async->test.js
在谷歌搜索上述错误时，我找到了一些答案，但这些答案与 Wallaybyjs 有关，而是特定于 Angular.
我试图通过 angular 项目的全新安装来重现该问题，但实际上无法重现。这可能是 Angular 7.
以下是 test.ts 文件：
// 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();
和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"
}
}
以下是 component 规范：
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();
});
});
如有任何帮助，我们将不胜感激。 谢谢
要使用 async() 功能，您需要导入 zone-testing。 尝试将 zone-testing 包导入到您的 test.ts 文件中。
import 'zone.js/dist/zone-testing'
可能已弃用以下命令：
ng test --main somecomponent.spec.ts
改为使用：
ng test
要仅 运行 一个特定的 spec 而不是 all，请在您的 describe 和 it 块前加上 f:
fdescribe('whatever', () => {})
我在 Angular 11 升级后收到此错误。
此行必须是 test.ts 中的第一行，在所有其他导入之前：
import 'zone.js/dist/zone-testing'; // zone-testing needs to be first import!
我使用这个命令只为了测试一个文件：
ng test --include somecomponent.spec.ts
如@clean-code 所述，您将遇到 --main 选项的问题。
旁观者测试框架也有同样的问题。
解决方案是，在旁观者导入之前导入 jest-preset-angular。
错误：
import { defineGlobalsInjections } from '@ngneat/spectator';
import 'jest-preset-angular';
正确：
import 'jest-preset-angular';
import { defineGlobalsInjections } from '@ngneat/spectator';
我有类似的问题，但使用 jest 测试框架。
删除所有 karma 和 jasmine 相关内容并安装 jest 相关人员后，您可能会遇到类似的错误
zone-testing.js is needed for the async() test helper but could not be found.
Please make sure that your environment includes zone.js/dist/zone-testing.js
这是我的 setup-jest.ts 文件
import 'jest-preset-angular';
import 'jest-extended';
当我将文件 setup-jest.ts 中的一个导入更改为此
import 'jest-preset-angular/setup-jest';
import 'jest-extended';
现在一切正常。