jasmine 2 - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL

Question

Having trouble with jasmine 2 and getting async specs wired up:

define(['foo'], function(foo) {
  return describe('foo', function() {
    beforeEach(function(done) {
      window.jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000;
      return setTimeout((function() {
        console.log('inside timeout');
        return done();
      }), window.jasmine.DEFAULT_TIMEOUT_INTERVAL);
    });
    return it('passes', function() {
      return expect({}).toBeDefined();
    });
  });
});

When I run via karma, I get back

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

and then the specs fail. I have attempted to override the default timeout but I can't get past the error

Answer 1

You are using the same timeout interval as Jasmine is using to fail tests on timeout, i.e. your timeout is triggered to fire with Jasmine's default interval, which fails the test.

If you set your timeout to be less than jasmine default timeout the test passes.

describe('foo', function () {
    beforeEach(function (done) {
        window.jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000;
        setTimeout(function () {
            console.log('inside timeout');
            done();
        }, 500);
    });
    it('passes', function () {
        expect({}).toBeDefined();
    });
});

See fiddle here

Answer 2

My 2 Cents. I also got this error mentioned in the question in another scenario.

I had a very simple spec like this:

describe('login feature', function() {
    it('should show the logged in user name after successful login', function(done) {
        expect({}).toBeDefined();
        //done(); // if you don't call this done here, then also above error comes
    });
});

See the commented out //done() function in 'it'

Answer 3

Another option that might work for you is to use async

The async function is one of the Angular testing utilities and has to be imported... It takes a parameterless function and returns a function which becomes the true argument to the beforeEach

The body of the async argument looks much like the body of a synchronous beforeEach. There is nothing obviously asynchronous about it. For example, it doesn't return a promise and there is no done function to call as there would be in standard Jasmine asynchronous tests. Internally, async arranges for the body of the beforeEach to run in a special async test zone that hides the mechanics of asynchronous execution.

See: https://angular.io/docs/ts/latest/guide/testing.html#!#async-in-before-each

describe('Component: MyComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      providers: [
        {provide: MyService, useValue: MyServiceMock()},
      ]
    })
    // Using webpack through Angular Cli. You may need ".compileComponents()"
    fixture = TestBed.createComponent(MyComponent)
    component = fixture.componentInstance
    // Initialize the component
    component.ngOnInit()
    fixture.detectChanges()
  }))

  it('should show the logged in user name after successful login',() {
      expect({}).toBeDefined()
  })
})