Angular/Karma unit test error "1 timer(s) still in the queue"
Solution 1
I have faced with the similar problem. The solution was flush function usage.
import { fakeAsync, flush } from '@angular/core/testing';
it('test something', fakeAsync(() => {
// ...
flush();
}));
Solution 2
I ran into the same issue recently - to resolve I called discardPeriodicTasks()
-from @angular/core/testing
at the end of my it
function and my tests passed after that.
In this scenario you may want to insert it before your final expect
it('should be able to change case', fakeAsync(() => {
expect(component).toBeTruthy();
fixture.whenStable().then(fakeAsync(() => {
component.case = 'lower';
fixture.autoDetectChanges();
tick(500);
const input = fixture.nativeElement.querySelector('input') as HTMLInputElement;
typeInElement('abcDEF', input);
fixture.autoDetectChanges();
tick(500);
expect(component.text).toEqual('abcdef');
component.case = 'upper';
fixture.autoDetectChanges();
tick(500);
typeInElement('abcDEF', input);
fixture.autoDetectChanges();
tick(500);
expect(component.text).toEqual('ABCDEF');
discardPeriodicTasks() <-------------------- try here
// Everything above works fine. Here's where the trouble begins
expect(() => {
component.case = 'foo';
fixture.autoDetectChanges();
tick(500);
}).toThrowError(/Invalid case attribute/);
}));
tick
acts to move the time forward in your fakeAsync context.
flush
acts to simulate the completion of time in that context by draining the macrotask queue till it is empty.
discardPeriodicTasks
"throws out" any remaining periodic tasks.
They each serve different purposes and will have different use cases.
kshetline
Apparently, this user doesn't prefer to keep an air of mystery about them.
Updated on March 26, 2021Comments
-
kshetline about 3 years
This is hardly first encounter I've had with
"1 timer(s) still in the queue"
, but usually I find some way to usetick()
ordetectChanges()
, etc., to get out of it.The test below was working fine until I tried to test for a condition that I know should throw an exception:
it('should be able to change case', fakeAsync(() => { expect(component).toBeTruthy(); fixture.whenStable().then(fakeAsync(() => { component.case = 'lower'; fixture.autoDetectChanges(); tick(500); const input = fixture.nativeElement.querySelector('input') as HTMLInputElement; typeInElement('abcDEF', input); fixture.autoDetectChanges(); tick(500); expect(component.text).toEqual('abcdef'); component.case = 'upper'; fixture.autoDetectChanges(); tick(500); typeInElement('abcDEF', input); fixture.autoDetectChanges(); tick(500); expect(component.text).toEqual('ABCDEF'); // Everything above works fine. Here's where the trouble begins expect(() => { component.case = 'foo'; fixture.autoDetectChanges(); tick(500); }).toThrowError(/Invalid case attribute/); })); }));
What I'm testing is an Angular component that's a wrapper around a Material input field. The component has many optional attributes, most of them just pass-through attributes for common input field features, but a few custom attributes too, like the one I'm testing above for upper-/lowercase conversion.
The acceptable values for the
case
attribute areupper
,lower
, andmixed
(with empty string, null, or undefined treated asmixed
). The component should throw an exception for anything else. Apparently it does, and the test succeeds, but along with the success I get:ERROR: 'Unhandled Promise rejection:', '1 timer(s) still in the queue.', '; Zone:', 'ProxyZone', '; Task:', 'Promise.then', '; Value:', Error: 1 timer(s) still in the queue. Error: 1 timer(s) still in the queue. ...
Can anyone tell me what I might be doing wrong, or a good way to flush out lingering timers?
Disclaimer: A big problem when I go looking for help with Karma unit tests is that, even when I explicitly search for "karma", I mostly find answers for Pr0tractor, Pr0tractor, and more Pr0tractor. This isn't Pr0tractor! (Deliberately misspelled with a zero so it doesn't get search matches.)
UPDATE: I can work around my problem like this:
expect(() => { component.inputComp.case = 'foo'; }).toThrowError(/Invalid camp-input case attribute/);
This isn't as good of a test as assigning the (bad) value via an HTML attribute in the test component's template, because I'm just forcing the value directly into the component's setter for the attribute itself, but it'll do until I have a better solution.
-
kshetline over 4 yearsI've moved on from the project where I had this problem a while ago, but I should bookmark this answer to give it a try the next time I get back to doing any more Angular unit tests.
-
brooklynDadCore over 4 yearsIt really saved me a lot of headache this morning, so I wanted to share. Best
-
Kieran Ryan about 3 yearsflush() worked for me as last instruction in unit test.. unfortunately discardPeriodicTasks() made no effect :-)
-
Kieran Ryan about 3 yearsFYI: whilst working with button clicks and requiring their side effects to be accounted for I stumbled upon a legitimate use case for fakeAsync! The requirement for using tick() swung it.. in "async" block equivalent would have been setTimeout(()=>{},0) but alongside using fixture.whenStable() more of a code bloat..