Karma Server 下的 Angular 单元测试：未处理的承诺拒绝：', '代码应该在 fakeAsync 区域中运行

Question

I'm using karma for my unit test developement.

I have used the couple fakeSynch - tick() for some test cases, also some promises.

My tests are successfully running but it seems that something went wrong with the karma server:

my test.spec.ts :

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';
import {RouterTestingModule} from '@angular/router/testing';
// Services and HTTP Module
import {HttpModule} from '@angular/http';
// Routs testing
import {Router, RouterModule} from '@angular/router';
import {routes} from './app-routing.module';
import {fakeAsync, tick} from '@angular/core/testing';
import {Location} from '@angular/common';
import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {AppRoutingModule} from './app-routing.module';

describe('Testing the application routes',() => {

  let location: Location;
  let router: Router;
  let fixture;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [ RouterTestingModule.withRoutes(routes)
        , FormsModule , DxTemplateModule , HttpModule ],
      providers: [SessionService , HttpService ],
      declarations: [
        AppComponent,
        LoginComponent,
        WelcomeComponent,
        ApplicationParametersComponent,
        InscriptionComponent,
        CustomersListComponent,
        CustomerDetailComponent
      ],
      schemas: [ CUSTOM_ELEMENTS_SCHEMA ]

    });
    router = TestBed.get(Router);
    location = TestBed.get(Location);
    fixture = TestBed.createComponent(AppComponent);
    router.initialNavigation();
  });

  afterEach(() => {
  });

  it('fakeAsync works', fakeAsync(() => {
    const promise = new Promise((resolve) => {
      setTimeout(resolve, 10);
    });
    let done = false;
    promise.then(() => done = true);
    tick(50);
    expect(done).toBeTruthy();
  }));

  it('navigate to nothing  takes you to /login', fakeAsync(() => {
    router.navigate(['']).then(() => {
      tick(50);
      expect(location.path()).toBe('/login');
    });
  }));
});

The output is this:

The karma server logging error:

"C:\Program Files\nodejs\node.exe" "C:\Program Files\JetBrains\WebStorm 2017.2\plugins\js-karma\js_reporter\karma-intellij\lib\intellijRunner.js" --karmaPackageDir=D:\Sources\DotNet\NextGCClientWeb\node_modules\karma --serverPort=9876 --urlRoot=/
'Unhandled Promise rejection:', 'The code should be running in the fakeAsync zone to call this function', '; Zone:', 'ProxyZone', '; Task:', 'Promise.then', '; Value:', Error{__zone_symbol__currentTask: ZoneTask{_zone: Zone{_properties: ..., _parent: ..., _name: ..., _zoneDelegate: ...}, runCount: 0, _zoneDelegates: null, _state: 'notScheduled', type: 'microTask', source: 'Promise.then', data: undefined, scheduleFn: undefined, cancelFn: null, callback: function () { ... }, invoke: function () { ... }}}, 'Error: The code should be running in the fakeAsync zone to call this function
    at _getFakeAsyncZoneSpec (http://localhost:9876/base/src/test.ts?dc8091e99bff30029161c35e4b947de1fa70f0f8:34714:15)
    at Object.tick (http://localhost:9876/base/src/test.ts?dc8091e99bff30029161c35e4b947de1fa70f0f8:34732:5)
    at http://localhost:9876/base/src/test.ts?dc8091e99bff30029161c35e4b947de1fa70f0f8:144338:23
    at ZoneDelegate.invoke (http://localhost:9876/base/src/polyfills.ts?46bda4eeec1a82b89fa6336e969fb7275ac9e6b3:1546:26)
    at ProxyZoneSpec.Array.concat.ProxyZoneSpec.onInvoke (http://localhost:9876/base/src/test.ts?dc8091e99bff30029161c35e4b947de1fa70f0f8:232602:39)
    at ZoneDelegate.invoke (http://localhost:9876/base/src/polyfills.ts?46bda4eeec1a82b89fa6336e969fb7275ac9e6b3:1545:32)
    at Zone.run (http://localhost:9876/base/src/polyfills.ts?46bda4eeec1a82b89fa6336e969fb7275ac9e6b3:1296:43)
    at http://localhost:9876/base/src/polyfills.ts?46bda4eeec1a82b89fa6336e969fb7275ac9e6b3:1986:57
    at ZoneDelegate.invokeTask (http://localhost:9876/base/src/polyfills.ts?46bda4eeec1a82b89fa6336e969fb7275ac9e6b3:1579:31)
    at ProxyZoneSpec.Array.concat.ProxyZoneSpec.onInvokeTask (http://localhost:9876/base/src/test.ts?dc8091e99bff30029161c35e4b947de1fa70f0f8:232626:39)'

It seems that there is some trouble with the promises config, I wonder if that is affecting the quality of my tests (which seem to be running).

Any ideas?

Answer 1

Try to wrap expect() with fakeAsync function

remove it from it('navigate to nothing takes you to /login', fakeAsync(() => {