How to fix "Error: Expected to be running in 'ProxyZone', but it was not found." in mocha...

I am trying to test my Tour of Heroes Angular application using mocha, chai & webpack. I have followed this post & also with the help of this guide, have gone through the setup and got the build errors fixed and tests up and running.

But, my tests fails except for the test case where I don't use the async() in the beforeEach hook.

Passing Test


beforeEach(() => {
TestBed.configureTestingModule({
imports: [HttpClientTestingModule],
providers: [HeroService, MessageService]
});
httpTestingController = TestBed.get(HttpTestingController);

let mockHeroes = [...mockData];
let mockHero = mockHeroes[0];
// let mockId = mockHero.id;

heroService = TestBed.get(HeroService);
});

afterEach(() => {
httpTestingController.verify();
});

it('is created', () => {
expect(heroService).to.exist;
});

Failing Test


//imports
import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { DashboardComponent } from './dashboard.component';
import { HeroSearchComponent } from '../hero-search/hero-search.component';

import { RouterTestingModule } from '@angular/router/testing';
import { HeroService } from '../hero.service';
import { expect } from 'chai';

...

beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [DashboardComponent, HeroSearchComponent],
imports: [RouterTestingModule.withRoutes([])],
providers: [{ provide: HeroService, useValue: heroService }]
}).compileComponents();
}));

beforeEach(() => {
fixture = TestBed.createComponent(DashboardComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should be created', () => {
expect(component).to.exist;
});

Error Stack Trace

1. DashboardComponent

"before each" hook for "should be created":​

Error: Expected to be running in 'ProxyZone', but it was not found.
at Function.ProxyZoneSpec.assertPresent (node_modules\zone.js\dist\proxy.js:42:19)
at runInTestZone (node_modules\zone.js\dist\async-test.js:202:23)
at D:\Practice\Tour-Of-Heroes\node_modules\zone.js\dist\async-test.js:185:17
at new ZoneAwarePromise (node_modules\zone.js\dist\zone-node.js:910:29)
at Context.<anonymous> (node_modules\zone.js\dist\async-test.js:184:20)​

I have tried Angular 5 Testing: Expected to be running in 'ProxyZone', but it was not found as I thought this was some error with zone.js using mocha, but without success.

Also, I have tried following Mocha Documentation for asynchronous testing, but as a beginner, it was somewhat hard for me.

I have tried googling and even in Stack Overflow, but there are only a limited amount of posts regarding Angular testing with mocha. Any help getting through this is appreciated.

Continue reading...