AsynctestzoneSpecは非同期 - Angular）に必要です。

アプリケーションはAngular v4上に構築されており、今までのすべてのリリースで徐々に更新されました。現在Angular v7上にあり、最後にCEOは事実ではなかった間に単体テストを書くことに同意しました。

私はちょうどテストを始めてプロジェクト全体でそれを実装し始めるために単純なスペックを作成しましたが、次のエラーで2日間立ち往生しました：

AsyncCtestzoneSpecはasync（）テストヘルパーに必要ですが、見つかりませんでした。環境にzone.js/dist/async-> test.jsが含まれていることを確認してください。

上記のエラーのためのグーグルの間、私はいくつかの答えを見つけましたが、それはWallaybyjsに関連していましたが、角度に特異的です。

私は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();
    });
});

誰もが理解されるでしょう。ありがとう

javascriptangularunit-testingangular-test

2019/07/16Clean Code

1つのファイルのみをテストするためにこのコマンドを使用します。

_ng test --include somecomponent.spec.ts_

@クリーンコードが述べたため、_--main_オプションに関する問題が発生します。

2021/02/09stackovermat