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

Question

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.

Answer 1

I had the same issue when accidentally using fakeAsync in a describe function.

Removed it solved the issue for me.

Answer 2

Here is the answer to this question.

Angular 5 Testing: Expected to be running in 'ProxyZone', but it was not found

Basically this exception is coming because of the incorrect position of an async keyword. Remove the async from beforeEach and add it on "it"

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

Answer 3

2021

Adding the line below as first import to the spec file fixed this problem for me:

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