Angular test with `async` causing Jasmine timeout?

Question

I recently upgraded a project to Angular 6, and now tests that were working fine before are now failing. Here's an example of one of those tests:

  beforeEach(
    async(() => {
      TestBed.configureTestingModule({
        declarations: [CampaignsDetailScheduleComponent],
        imports: [
          SomeModule,
          ReactiveFormsModule,
          TranslateModule.forRoot({
            loader: { provide: TranslateLoader, useClass: TranslateFakeLoader }
          }),
          StoreModule.forRoot({})
        ],
        providers: [{ provide: ConfigService, useValue: ConfigServiceMock }],
        schemas: [NO_ERRORS_SCHEMA]
      });
      fixture = TestBed.createComponent(CampaignsDetailScheduleComponent);
      comp = fixture.componentInstance; // Component test instance
      _store = fixture.debugElement.injector.get<Store<State>>(Store);
      comp.campaignModel$ = of(CampaignMockData);
      fixture.detectChanges();
    })
  );

it(
    'close edit schedule modal',
    async(() => {
      spyOn(_store, 'dispatch');
      comp.onClose();
      const args = new ShowHideEditScheduleModal(false);
      expect(_store.dispatch).toHaveBeenCalledWith(args);
    })
  );

Pre-Angular 6, this test passed with no issues. But now under Angular 6, I get the error:

Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.--Pendng async tasks are: [type: macroTask, source: setInterval, args: {handleId:4072,isPeriodic:true,delay:0,args:[object Arguments],__creationTrace__:[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]},type: macroTask, source: setInterval, args: {handleId:4075,isPeriodic:true,delay:0,args:[object Arguments],__creationTrace__:[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]}]

Does anyone have any idea what might be going on?

I do not know if this is some Jasmine thing, but are you sure you need the async since you don't have any await ? — Seblor
– Seblor, Commented Jun 7, 2018 at 17:58
@Seblor In this case, async isn't the JavaScript async keyword, it's a helper function provided by Angular. — Joe Attardi
– Joe Attardi, Commented Jun 7, 2018 at 17:59
Thanks for the information. Do you have any link to the doc about that ? — Seblor
– Seblor, Commented Jun 7, 2018 at 18:00
This might be helpful: alligator.io/angular/testing-async-fakeasync — Joe Attardi
– Joe Attardi, Commented Jun 7, 2018 at 18:05
Have you tried this fix ? github.com/angular/protractor/issues/… — Seblor
– Seblor, Commented Jun 7, 2018 at 18:19

cizario · Accepted Answer · 2020-11-23 11:12:50Z

1

use fakeAsync instead of async in before each block.

edited Nov 23, 2020 at 11:12

cizario

4,2843 gold badges16 silver badges27 bronze badges

answered Nov 23, 2020 at 10:39

Nandana Goli

111 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

Amit Chigadani · Accepted Answer · 2018-06-07 18:03:37Z

0

You can either increase the default jasmine timeout (which is 5s) interval by doing

it(
    'close edit schedule modal',
    async(() => {
      spyOn(_store, 'dispatch');
      comp.onClose();
      const args = new ShowHideEditScheduleModal(false);
      expect(_store.dispatch).toHaveBeenCalledWith(args);
   // increase default timeout interval to 10s
}), 10000);

OR you can solve it using done() method. Adding this will wait for your test to complete. I guess you cannot use async while using done()

it('close edit schedule modal', (done) => {
          spyOn(_store, 'dispatch');
          comp.onClose();
          const args = new ShowHideEditScheduleModal(false);
          expect(_store.dispatch).toHaveBeenCalledWith(args);
          done();
       // increase default timeout interval to 10s
 }, 10000);

answered Jun 7, 2018 at 18:03

Amit Chigadani

29.9k14 gold badges88 silver badges102 bronze badges

6 Comments

Joe Attardi Over a year ago

Thank you for the suggestions. Unfortunately neither of these solutions seem to work in this case. :(

Amit Chigadani Over a year ago

Ok comp.onClose(); is executed asynchronously right. Then you can simply add the code inside setTimeout(). Or if you wish to stick with async then use fixture.whenStable().then()

Joe Attardi Over a year ago

What's really strange is that I have other tests in other files that follow the same pattern, and those tests are passing. I have no idea what's going on here.

Joe Attardi Over a year ago

I was able to narrow down the problem. If I comment out the call to fixture.detectChanges() in the beforeEach call, the test passes. Not sure why, though...

Amit Chigadani Over a year ago

Well then, you probably have something asynchronous inside ngOnInit(). Since you commented out fixture.detectChanges, your ngOnInit() was not invoked and hence your test case executed synchronously which made it pass.

|

Collectives™ on Stack Overflow

Angular test with `async` causing Jasmine timeout?

2 Answers 2

Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related