Error: The code should be running in the fakeAsync zone to call this function

Question

I am trying to run my test case which is throwing this exception with jasmine.

Below is my test case where I am just trying to check whether the object is created or not.

describe('AppComponent', () => {
  let httpMock: HttpTestingController;
  let service: MyService;
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [
        HttpClientTestingModule        
      ],
      declarations: [
        AppComponent
      ],
      providers: [MyService]
    }).compileComponents();
    httpMock = TestBed.inject(HttpTestingController);
    service =  TestBed.inject(MyService)
    
  });

  afterEach(() => {
    flush();
    httpMock.verify();
  });

  it('should create the app', fakeAsync(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app).toBeTruthy();
  }));
});

app.component.ts

export class AppComponent implements OnInit {
  title = 'My Sample App';
  dataSelected: string = "";

 
constructor(private service: MyService) {}
  ngOnInit(): void {
    this.service.getData(this.dataSelected);
  }

}

my.filter.service.ts

export class MyService {

  availableData: BehaviorSubject<string[]> | undefined;

  constructor(private http: HttpClient) { 
    let emptyArray :string[] = [];
    this.availableData = new BehaviorSubject(emptyArray);
  }

  getData(data: string){
   this.http.post("http://localhost:8080/getData", 
      {"name": data}).subscribe(respData => {
        let resp: string[] = Object.values(respData);
      this.availableData?.next(resp);
      console.log("Data fetched from server");
    });
  }
}

Error-Information

Error: The code should be running in the fakeAsync zone to call this function
Error: The code should be running in the fakeAsync zone to call this function
    at _getFakeAsyncZoneSpec (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:2072:1)
    at Object.flush (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:2105:1)
    at flush (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/testing.js:372:1)
    at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/src/app/app.component.spec.ts:33:10)
    at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:372:1)
    at ProxyZoneSpec.push.QpwO.ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:301:1)
    at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:371:1)
    at Zone.run (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:134:1)
    at runInTestZone (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:581:1)
    at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:596:1)

Please help me with some possible solutions that works here.

Answer 1

The exception is related to flush() used inside the afterEach function.

afterEach(() => {
  flush();
  httpMock.verify();
});

You can probably simply remove it since there's no async stuff in your test so far.