Angular 2 testing: Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL

Question

people! Please, be kind to share your ideas about fixing the following. While writing a test for Angular2 component I encountered this kind of error:

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

The component under test is: (sorry, it is bulky)

The test:

import { TestBed, ComponentFixture, async, inject } from '@angular/core/testing';
import { DebugElement } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {Injectable} from '@angular/core';

import {FormGroup, FormBuilder, ReactiveFormsModule} from '@angular/forms';

import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/of';

import SignupComponent from './signup.component';
import {UserService} from '../services/user.service';


@Injectable()
export class MockUserService {
    public signup(user: any) {
        return Observable.of({});
    }
}

let component: SignupComponent;
let fixture: ComponentFixture<SignupComponent>;

describe('SignupComponent', () => {
     beforeEach(async(() => {
         TestBed.configureTestingModule({
            declarations: [ SignupComponent ],
            imports: [
                 BrowserModule,
                 ReactiveFormsModule
            ]
        })
        .overrideComponent(SignupComponent, {
            set: {
                templateUrl: 'app/components/signup.component.html'
            }}
        )
        .overrideComponent(SignupComponent, {
            set: {
                providers: [
                    { provide: UserService, useClass: MockUserService },
                ]
            }
        })
        .compileComponents().then(createComponent);
}));

    it('should create an instance', () => {
        expect(component).toBeDefined();
    });
});

 /***** HELPERS *****/
 function createComponent() {
      fixture = TestBed.createComponent(SignupComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();

     return fixture.whenStable().then(() => {
         fixture.detectChanges();
     });
 }

Answer 1

This happens when you async spec finishes after the default time out that jasmine has specified, which is 5 seconds. This is taken from Jasmine documentation -

By default jasmine will wait for 5 seconds for an asynchronous spec to 
finish before causing a timeout failure. If the timeout expires before 
done is called, the current spec will be marked as failed and suite 
execution will continue as if done was called.

If specific specs should fail faster or need more time this can be 
adjusted by setting jasmine.DEFAULT_TIMEOUT_INTERVAL around them.

If the entire suite should have a different timeout, 
jasmine.DEFAULT_TIMEOUT_INTERVAL can be set globally, outside of any 
given describe.

Here is the link for the same. Please increase the DEFAULT_TIMEOUT_INTERVAL for your async calls so that jasmine has enough time to know the call got processed. This might be because of your component being bulky (as you have specified).