Angular Karma：从 Angular v8 升级到 v12 后，await fixture.whenStable 总是超时

Question

I have some unit tests for a component that uses reactive forms.

In the tests, I will patch values on the form, and then the unit test will test what I expect from various form valueChanges subscriptions.

So that the test waits for the valueChanges to execute, I always used the following after the patch :

fixture.detectChanges();
await fixture.whenStable();

and this always worked fine.

After my upgrade (went from v8 to v12), all tests time out when I have the await fixture.whenStable() .

Ie I get:

    Error: Timeout - Async function did not complete within 5000ms (set by jasmine.DEFAULT_TIMEOUT_INTERVAL)
    error properties: Object({ originalStack: 'Error: Timeout - Async function did not complete within 5000ms (set by jasmine.DEFAULT_TIMEOUT_INTERVAL)
            at new ZoneAwareError (http://localhost:9877/_karma_webpack_/webpack:/node_modules/zone.js/fesm2015/zone-error.js:92:33)

Of course, if I remove the await fixture.whenStable(); the test no longer works, as when I try and access the properties set is the form valueChanges they are not set.

Why would the await fixture.whenStable() now seem to hang?

Answer 1

Coming back to this today, I think I found the problem (in my case).

I had a setTimeout in the components ngAfterViewInit() which was not being cleared. Infact having the setTimeout at all was a bug, it was only need to go off once, so should have been a setInterval . I did have some problems with the ngAfterViewInit so I already had

spyOn(component, 'ngAfterViewInit').and.callFake(() => { });

as the code in the timer was not that important (just turing animations on/off), so still not 100% sure why a change in the real ngAfterViewInit made a difference... and yet it did, my await fixture.whenStable(); no longer hangs, and the test now waits for the forms valueChanges .