异步需要 AsyncTestZoneSpec - Angular

Posted 2023-02-22

【中文标题】异步需要 AsyncTestZoneSpec - Angular

【英文标题】：AsyncTestZoneSpec is needed for the async - Angular

【发布时间】：2019-11-24 21:17:46

【问题描述】：

该应用程序是基于Angular v4 构建的，并且直到现在都随着每个版本逐渐更新。目前我们在Angular v7 上，最终CEO 同意编写单元测试，而以前不是这样。

我刚刚创建了一个简单的规范来开始测试并开始在整个项目中实施它，但是由于以下错误而卡住了两天：

async() 测试助手需要 AsyncTestZoneSpec，但找不到。请确保您的环境包含 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();
    );
);

任何帮助将不胜感激。 谢谢

【参考方案1】：

我遇到了类似的问题，但使用的是 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';

现在一切正常。

【参考方案2】：

我在使用旁观者测试框架时遇到了同样的问题。

解决方案是，在观众导入之前导入 jest-preset-angular。

错误：

import  defineGlobalsInjections  from '@ngneat/spectator';
import 'jest-preset-angular';

正确：

import 'jest-preset-angular';
import  defineGlobalsInjections  from '@ngneat/spectator';

【参考方案3】：

我使用这个命令只是为了测试一个文件：

ng test --include somecomponent.spec.ts

正如@clean-code 所述，您将遇到--main 选项的问题。

【讨论】：

ng test --include '**/somecomponent.spect.ts' wfm.

【参考方案4】：

Angular 11 升级后我收到此错误。

此行必须是 test.ts 中的第一行，在所有其他导入之前：

import 'zone.js/dist/zone-testing'; // zone-testing needs to be first import!

【讨论】：

确认！从今天开始，我们遇到了这个问题，升级我们的包锁。将导入移至第一个解决了该问题。我们必须 /* tslint:disable */ 文件，否则我们有自动导入排序。升级将依赖项从 11.0.2 更改为 11.0.3。

在我的情况下，我还必须将此导入作为我的第一个导入该文件（在导入 getTestBed 等之前）。

这正是我的问题！我还不得不在 VS 代码中禁用组织导入，它不断重新组织导入以将其放在最后并导致问题。

对我来说，添加后，现在运行测试显示：`cannot find module ''zone.js/dist/zone-testing'

【参考方案5】：

以下命令可能已被弃用：

ng test --main somecomponent.spec.ts

改为：

ng test

要仅运行特定的 spec 而不是 all，请在 describe 和 it 块前加上 f：

fdescribe('whatever', () => )

【参考方案6】：

要使用 async() 功能，您需要导入 zone-testing。 尝试将 zone-testing 包导入您的 test.ts 文件。

import 'zone.js/dist/zone-testing'

Refer this link - Angular Documentation

【讨论】：

感谢您的回答，但问题出在命令 ng test --main abc.component.spec.ts 上，当我只运行 ng test 时，它就起作用了