Angular8 unit testing jasmine timeout issue

Question

Running into random unit test failures with this failure mode

Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.

Some of these tests that failed do not even have async testing going on!

Wondering if this snippet of code is correct or not; it is a pattern we use across the board in all tests in Angular

beforeEach(async(() => {
    TestBed.configureTestingModule({ . // Should this be **return TestBed.configureTestingModule**
      imports: [
        ...CommonTestModules
      ],
      declarations: [FooComponent]
    })
    .compileComponents();
  }));

Should the promise of compileComponents be returned from the callback? I read somewhere that the promises are awaited for by the async wrapper which eventually calls done() when the promises are resolved. But here this pattern looks like it is not returning the promise and we are not invoking the "await" keyword anywhere either. Does this code appear wrong without the return statement?

DWilches · Accepted Answer · 2019-10-09 04:55:08Z

0

It's ok to not return that promise, the async function takes care of waiting for all promises created inside of the beforeEach. You can see that pattern throughout the Angular Testing docs:

beforeEach(async(() => {
  TestBed.configureTestingModule({
    declarations: [ BannerComponent ],
  })
  .compileComponents();  // compile template and css
}));

It's possible your IDE will complain, like WebStorm does, because it doesn't know the semantics of Angular's async function (notice this is not the same async keyword from JavaScript, this one is a function declared in Angular

About your original error, try to isolate a test that fails, or add an example of one of those tests that sometimes fail to see if we see anything weird.

answered Oct 9, 2019 at 4:55

DWilches

23.4k17 gold badges82 silver badges113 bronze badges

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

2 Comments

Jandro Rojas Over a year ago

I don't think this answers the original question. The test will run regardless of the IDE being used. BTW async is not Angular's, it's Jasmine's: jasmine.github.io/tutorials/async

DWilches Over a year ago

@JandroRojas Jasmine doesn't have it's own async, the one from your link comes from JavaScript. The async used in the answer is the one that comes from Angular (check the link, and the part: "notice this is not the same async keyword from JavaScript, this one is a function declared in Angular")

Jandro Rojas · Accepted Answer · 2020-04-16 12:35:22Z

0

You don't need it to be async, you can simply remove the async function and do it sync using createComponent(your_component) instead of compileComponents() (you're waiting for its resolution anyway). I can confirm this works:

beforeEach(() => {
  TestBed.configureTestingModule({
    declarations: [ BannerComponent ],
  });
  fixture = TestBed.createComponent(BannerComponent);
  component = fixture.componentInstance;
  fixture.detectChanges();
});

Hope it helps

answered Apr 16, 2020 at 12:35

Jandro Rojas

2,0021 gold badge15 silver badges15 bronze badges

Collectives™ on Stack Overflow

Angular8 unit testing jasmine timeout issue

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related