Karma: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.
I run npm run test in terminal, but I encountered error below, I don't know what does the error mean, how could I do?
Actual behaviour
> [email protected] test /Users/gengliming/Desktop/vue2-project
> npm run unit
> [email protected] unit /Users/gengliming/Desktop/vue2-project
> karma start test/unit/karma.conf.js --single-run
04 11 2016 19:32:48.962:INFO [karma]: Karma v1.3.0 server started at http://localhost:9876/
04 11 2016 19:32:48.965:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
04 11 2016 19:32:48.970:INFO [launcher]: Starting browser PhantomJS
04 11 2016 19:32:49.727:INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket /#2CXoJv9uwmam8iCsAAAA with id 47647179
LOG LOG: '552a0d2a68b89f6e13d0e07d71f831cd1797e7cd89'
ERROR LOG: 'Unhandled promise rejection', TypeError{stack: 'http://localhost:9876/base/index.js?27a36bfdace53b5f11dc9ece93feea32e45ab5c8:9719:2397
Promise@http://localhost:9876/base/index.js?27a36bfdace53b5f11dc9ece93feea32e45ab5c8:1706:16
getAuthUserInfo@http://localhost:9876/base/index.js?27a36bfdace53b5f11dc9ece93feea32e45ab5c8:9719:2276
http://localhost:9876/base/index.js?27a36bfdace53b5f11dc9ece93feea32e45ab5c8:173:27
attemptAsync@http://localhost:9876/absolute/Users/gengliming/Desktop/vue2-project/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?916005cc407925f4764668d61d04888d59258f5d:1980:28
run@http://localhost:9876/absolute/Users/gengliming/Desktop/vue2-project/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?916005cc407925f4764668d61d04888d59258f5d:1935:21
execute@http://localhost:9876/absolute/Users/gengliming/Desktop/vue2-project/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?916005cc407925f4764668d61d04888d59258f5d:1923:13
queueRunnerFactory@http://localhost:9876/absolute/Users/gengliming/Desktop/vue2-project/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?916005cc407925f4764668d61d04888d59258f5d:714:42
execute@http://localhost:9876/absolute/Users/gengliming/Desktop/vue2-project/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?916005cc407925f4764668d61d04888d59258f5d:371:28
fn@http://localhost:9876/absolute/Users/gengliming/Desktop/vue2-project/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?916005cc407925f4764668d61d04888d59258f5d:2579:44
attemptAsync@http://localhost:9876/absolute/Users/gengliming/Desktop/vue2-project/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?916005cc407925f4764668d61d04888d59258f5d:1980:28
run@http://localhost:9876/absolute/Users/gengliming/Desktop/vue2-project/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?916005cc407925f4764668d61d04888d59258f5d:1935:21
execute@http://localhost:9876/absolute/Users/gengliming/Desktop/vue2-project/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?916005cc407925f4764668d61d04888d59258f5d:1923:13
queueRunnerFactory@http://localhost:9876/absolute/Users/gengliming/Desktop/vue2-project/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?916005cc407925f4764668d61d04888d59258f5d:714:42
fn@http://localhost:9876/absolute/Users/gengliming/Desktop/vue2-project/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?916005cc407925f4764668d61d04888d59258f5d:2564:31
attemptAsync@http://localhost:9876/absolute/Users/gengliming/Desktop/vue2-project/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?916005cc407925f4764668d61d04888d59258f5d:1980:28
run@http://localhost:9876/absolute/Users/gengliming/Desktop/vue2-project/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?916005cc407925f4764668d61d04888d59258f5d:1935:21
execute@http://localhost:9876/absolute/Users/gengliming/Desktop/vue2-project/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?916005cc407925f4764668d61d04888d59258f5d:1923:13
queueRunnerFactory@http://localhost:9876/absolute/Users/gengliming/Desktop/vue2-project/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?916005cc407925f4764668d61d04888d59258f5d:714:42
execute@http://localhost:9876/absolute/Users/gengliming/Desktop/vue2-project/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?916005cc407925f4764668d61d04888d59258f5d:2426:25
execute@http://localhost:9876/absolute/Users/gengliming/Desktop/vue2-project/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?916005cc407925f4764668d61d04888d59258f5d:776:24
http://localhost:9876/absolute/Users/gengliming/Desktop/vue2-project/node_modules/karma-jasmine/lib/adapter.js?7975a273517f1eb29d7bd018790fd4c7b9a485d5:320:23
loaded@http://localhost:9876/context.js:151:17
global code@http://localhost:9876/context.html:40:28', line: 9719, sourceURL: 'http://localhost:9876/base/index.js?27a36bfdace53b5f11dc9ece93feea32e45ab5c8'}
Api.users
✗ will get json data
Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.
App.vue
✓ should export the correct `name`
✓ has a created hook
UserPage.vue
✓ shoule have the correct name : UserPage
PhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 4 of 4 (1 FAILED) (5.231 secs / 5.216 secs)
TOTAL: 1 FAILED, 3 SUCCESS
1) will get json data
Api.users
Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.
=============================== Coverage summary ===============================
Statements : 81.11% ( 176/217 ), 42 ignored
Branches : 94.68% ( 89/94 ), 36 ignored
Functions : 41.86% ( 18/43 )
Lines : 58.95% ( 56/95 )
================================================================================
npm ERR! Darwin 15.3.0
npm ERR! argv "/usr/local/Cellar/node/5.10.1/bin/node" "/usr/local/bin/npm" "run" "unit"
npm ERR! node v6.8.1
npm ERR! npm v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! [email protected] unit: `karma start test/unit/karma.conf.js --single-run`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] unit script 'karma start test/unit/karma.conf.js --single-run'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the vue2-project package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! karma start test/unit/karma.conf.js --single-run
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs vue2-project
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls vue2-project
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /Users/gengliming/Desktop/vue2-project/npm-debug.log
npm ERR! Test failed. See above for more details.
Environment Details
- Karma version (output of
karma --version): Karma version: 1.3.0 - Relevant part of your
karma.config.jsfile
module.exports = function (config) {
config.set({
// to run in additional browsers:
// 1. install corresponding karma launcher
// http://karma-runner.github.io/0.13/config/browsers.html
// 2. add it to the `browsers` array below.
browsers: ['PhantomJS'],
frameworks: ['jasmine'],
reporters: ['spec', 'coverage'],
files: ['./index.js'],
preprocessors: {
'./index.js': ['webpack', 'sourcemap']
},
webpack: webpackConfig,
webpackMiddleware: {
noInfo: true
},
coverageReporter: {
dir: './coverage',
reporters: [
{ type: 'lcov', subdir: '.' },
{ type: 'text-summary' }
]
}
})
}
specs
users.spec.js：
import Api from 'src/api'
describe('Api.users', () => {
const { users } = Api
it('will get json data', done => {
users.getAuthUserInfo('552a0d2a68b89f6e13d0e07d71f831cd1797e7cd89').then(json => {
expect(typeof json).toBe('object')
done()
}).catch(err => {
throw err
})
})
})
CoderLim
All 15 comments
You seem to have a test (Probably the will get json data >> Api.users one that needs to call done() method. Take a look at the function argument.
The error message tells you that the done() was not called within the timeout period. This means that the async expectation was not met. First check if you really need the done in your test case.
More details about done here: http://stackoverflow.com/questions/27344872/testing-asynchronous-callbacks-with-jasmine
vivganes
on 4 Nov 2016
Thanks @vivganes , I have called done actually, here is my codeline :
users.spec.js：
import Api from 'src/api'
describe('Api.users', () => {
const { users } = Api
it('will get json data', done => {
users.getAuthUserInfo('552a0d2a68b89f6e13d0e07d71f831cd1797e7cd89').then(json => {
expect(typeof json).toBe('object')
done()
}).catch(err => {
throw err
})
})
})
@CoderGLM it is quite possible that an exception occurs. In such case done() will not be called as we are just throwing err
Another possibility is that users.getAuthUserInfo('552a0d2a68b89f6e13d0e07d71f831cd1797e7cd89') did not return within the timeout period. Is there a possibility that this method is taking too long?
vivganes
on 5 Nov 2016
@vivganes There is an exception occurs, so I catch it like this:
it('will get json data', done => {
users.getAuthUserInfo('3f3c4d1ac7c55d89b48bcdbe6d519f5ba3167b78').then(json => {
expect(typeof json).toBe('object')
}).catch(error => {
expect(true).boBe(true);
}).finally(done)
})
But I encountered another error：
05 11 2016 14:12:25.416:INFO [karma]: Karma v1.3.0 server started at http://localhost:9876/
05 11 2016 14:12:25.418:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
05 11 2016 14:12:25.446:INFO [launcher]: Starting browser PhantomJS
05 11 2016 14:12:26.139:INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket /#AL6ki8OFEEHi-zpKAAAA with id 25159723
Api.users
✗ will get json data
TypeError: undefined is not a constructor (near '...}).finally(done);...') in index.js (line 190)
webpack:///test/unit/specs/api/users.spec.js:30:15 <- index.js:190:16
loaded@http://localhost:9876/context.js:151:17
App.vue
✓ should export the correct `name`
✓ has a created hook
UserPage.vue
✓ shoule have the correct name : UserPage
PhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 4 of 4 (1 FAILED) (0.031 secs / 0.007 secs)
TOTAL: 1 FAILED, 3 SUCCESS
1) will get json data
Api.users
TypeError: undefined is not a constructor (near '...}).finally(done);...') in index.js (line 190)
webpack:///test/unit/specs/api/users.spec.js:30:15 <- index.js:190:16
loaded@http://localhost:9876/context.js:151:17
@CoderGLM I am wondering if this error is because of a typo
}).catch(error => {
expect(true).boBe(true);
}).finally(done)
Can you try changing boBe to toBe. It is quite possible that it is something different from this also. but, can you please try this first?
Before that, do you really need that expect there? If not needed, you can totally remove that line and check
vivganes
on 9 Nov 2016
@vivganes Not a typo error, the error occurs again when I clear catch block:
unit-test:
it('will get json data', done => {
users.getAuthUserInfo('3f3c4d1ac7c55d89b48bcdbe6d519f5ba3167b78').then(json => {
expect(typeof json).toBe('object')
}).catch(error => {
}).finally(done)
})
error:
TypeError: undefined is not a constructor (near '...(error) {}).finally(done);...') in index.js (line 188)
When I access access_token-invalid-page in which users.getAuthUserInfo(access_token) has been called, the console shows :
vue-resource.common.js?2f13:1071 GET https://api.github.com/user?access_token=134 401 (Unauthorized)
If the parameter called access_token of users.getAuthUserInfo is valid, then the unit-test works, otherwise, 401 http error will occur in users.getAuthUserInfo. The unit-test can't catch it and raise another error?
CoderLim
on 10 Nov 2016
I close this issue because it's not related to the karma. Error in client's code.
Thanks!
maksimr
on 25 Nov 2016
Whatever, but "Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL" is useless.
Ismaestro
on 18 Oct 2017
The message is sent by jasmine framework, not by karma or karma-jasmine. It needs to be fixed in jasmine.
johnjbarton
on 18 Oct 2017
In my case, this was caused by improper use of "fixture.detectChanges()" It seems this method is a event listener (async) which will only respond a callback when changes are detected. If no changes are detected it will not invoke the callback, resulting in a timeout error. Hope this helps :)
AFigueroa
on 14 Jun 2018
@AFigueroa Do you know what to do in case that is the problem? How can i fix this?
I just remove fixture.detectChanges()?
fatihv
on 22 Jun 2018
@fatihv The issue was caused for me when I was calling fixture.detectChanges, but I didn't have anything defined as the component ngOnInit or anything else, other than non-angular specific functions. Removing the call to detect changes worked for me--thanks, @AFigueroa
dasch88
on 23 Jul 2018
Guys, it's all about doing things right.
My problem was caused because of how we create our tests. We didn't mock anything at all, a lot of memory was required because of that and the chrome driver disconnect and there you have all the timeouts.
My solution, use ng-mocks and ng-bullet and all the timeouts are gone. We have 288 tests. Before using mocks everywhere sometimes they took 2min and a half to finish. Now they pass in 8 seconds and with no timeout at all.
So, mock every service, module, component, pipe, etc and you will have a nice deployment (CI).
This is my karma config:
// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html
process.env.CHROME_BIN = require('puppeteer').executablePath();
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular-devkit/build-angular'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-mocha-reporter'),
require('karma-coverage-istanbul-reporter'),
require('@angular-devkit/build-angular/plugins/karma')
],
client: {
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
files: [
{
pattern: './test.ts',
watched: false
},
{
pattern: '../node_modules/cookieconsent/build/cookieconsent.min.js',
watched: true,
included: true,
served: true
}
],
coverageIstanbulReporter: {
dir: require('path').join(__dirname, '../coverage'),
reports: ['html', 'lcovonly'],
fixWebpackSourcePaths: true
},
reporters: ['progress', 'mocha'],
mochaReporter: {
output: 'minimal'
},
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
singleRun: false,
browsers: ['ChromeHeadlessNoSandbox'],
browserDisconnectTolerance: 2,
browserNoActivityTimeout: 10000,
reportSlowerThan: 90,
customLaunchers: {
ChromeHeadlessNoSandbox: {
base: 'ChromeHeadless',
flags: ['--no-sandbox']
}
}
});
};
Notice reportSlowerThan!!!
Here I'm going to leave a complete example:
import {ComponentFixture, TestBed} from '@angular/core/testing';
import {ApplicationNewComponent} from './application-new.component';
import {Application} from '../../shared/application.model';
import Program from '../../../program/shared/program.model';
import {ProgramService} from '../../../program/shared/program.service';
import * as applicationFixture from '../../shared/fixtures/application.json';
import * as programFixture from '../../../../modules/program/shared/fixtures/program.json';
import {of} from 'rxjs';
import {MockComponent, MockModule, MockPipe} from 'ng-mocks';
import {ApplicationPlaceholderComponent} from '../../components/application-placeholder/application-placeholder.component';
import {TranslateService} from '@ngx-translate/core';
import {ApplicationFormComponent} from '../../components/application-form/application-form.component';
import {RouterTestingModule} from '@angular/router/testing';
import {LocalizeRouterPipe, LocalizeRouterService} from 'localize-router';
import {HttpClientTestingModule} from '@angular/common/http/testing';
import {configureTestSuite} from 'ng-bullet';
import {CookieService} from 'ngx-cookie';
import {NgSelectModule} from '@ng-select/ng-select';
describe('ApplicationNewComponent', () => {
let component: ApplicationNewComponent;
let fixture: ComponentFixture<ApplicationNewComponent>;
const programServiceSpy = jasmine.createSpyObj('ProgramService', [
'getProgram'
]);
configureTestSuite(() => {
TestBed.configureTestingModule({
imports: [
MockModule(NgSelectModule),
RouterTestingModule,
HttpClientTestingModule
],
declarations: [
MockComponent(ApplicationPlaceholderComponent),
MockComponent(ApplicationFormComponent),
MockPipe(LocalizeRouterPipe),
ApplicationNewComponent
],
providers: [
{provide: ProgramService, useValue: programServiceSpy},
{
provide: TranslateService, useValue:
{
getBrowserCultureLang: (key) => key,
instant: (key) => key
}
},
{provide: LocalizeRouterService, useValue: {}},
{
provide: CookieService, useValue: {
getObject: () => {
}
}
}
]
});
});
beforeEach(() => {
fixture = TestBed.createComponent(ApplicationNewComponent);
component = fixture.componentInstance;
programServiceSpy.getProgram.and.returnValue(of(programFixture));
component.program = new Program(programFixture);
component.application = new Application(applicationFixture);
component.numberTypes = ProgramService.numberTypes;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
Our results at this moment:
TOTAL: 288 SUCCESS
Finished in 7.817 secs / 2.645 secs @ 13:08:42 GMT+0200 (CEST)
SUMMARY:
✔ 288 tests completed
âš 1 test slow
Hope this help someone.
Ismaestro
on 8 May 2019
Try using lesser timeout instead. I got this error while using timeout = 5000. I replaced it with 2000 and it worked for me!
marinariaz
on 16 May 2019
@marinariaz And how did you setup the timeout, where exactly?
mehmetsen80
on 21 Apr 2020
Related issues
kiramclean
·
4Comments
VinishaDsouza
·
3Comments
charpour
·
3Comments
ebacka
·
3Comments
mboughaba
·
3Comments
Most helpful comment
In my case, this was caused by improper use of "fixture.detectChanges()" It seems this method is a event listener (async) which will only respond a callback when changes are detected. If no changes are detected it will not invoke the callback, resulting in a timeout error. Hope this helps :)