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?

score 0 · Accepted Answer · answered Oct 09 '19 at 04:55

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 09 '19 at 04:55

Daniel

21,933
14
72
101

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: https://jasmine.github.io/tutorials/async – Jandro Rojas Apr 16 '20 at 12:41
@JandroRojas Jasmine doesn't have it's own `async`, the one from your link [comes from JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function). 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") – Daniel Apr 17 '20 at 03:25

score 0 · Answer 2 · answered Apr 16 '20 at 12:35

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

Angular8 unit testing jasmine timeout issue

2 Answers2