Karma Unit Test Timeout on PhantomJS with large Angular Templates

Question

I'm trying to find a solution to this error:

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

When I run karma unit tests with headless browser, test passes if run with chrome browser instead, also when my angular component has few lines of html the test passes.

Here's my test file,

import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';

fdescribe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));

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

});

My component is very simple, does nothing but load the html template

import { Component } from '@angular/core';

@Component({
  selector: 'pm-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  pageTitle: string = 'Angular: Getting Started';
}

Are you leveraging periodic schedulers in your component/template somehow (i.e. Interval)? Also could use let us know if the tests still timeout if you run the async outside of Angular's "home zone". For example: beforeEach(fakeAsync() => { //etc.... — iHazCode
Thanks! Using fakeAsync solved the problem. To answer your question, no I am not leveraging schedulers in component, component is as shown above, html template has no bindings, just lots of tags. — Jimmy Fencer

Jimmy Fencer Jimmy Fencer · Accepted Answer · 2018-02-11T01:33:55

The solution to this is as pointed out by iHazCode, use fakeAsync in place of async

import { TestBed, async, fakeAsync } from '@angular/core/testing';

import { AppComponent } from './app.component';

fdescribe('AppComponent', () => {
  beforeEach(fakeAsync(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));

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

Karma Unit Test Timeout on PhantomJS with large Angular Templates

1 Answers