Angular - fakeAsync tests fail after switching from es2016 to es2018 or higher

I am working on an upgrade of my project and i wanted to make sure i was using more up to date ECMAScript.

In my tsconfig.spec.json files I had es2016, and i updated it to be 2018, and even tried out es2022.

Most of my tests will pass after changing versions, but I have a small handful that fail now. For example, I have this method that closes and destroys a modal.

async destroyModal(): Promise<void> {
const { modalComponentType, modalComponentRef } = this._state$.value;
document.querySelector('dialog')?.close();
this.setState({ modalComponentType, modalComponentRef, modalOpen: false }, ModalStateActions.CloseModal);

// Wait for 300ms for animation before proceeding
await new Promise(resolve => setTimeout(resolve, 300));

// Clear the modal container and notify observers
this.resetModal();
}


And I test this like so:

it('should destroy modal on esc press', fakeAsync(() => {
service.initModalContainer(hostComponent.componentInstance.viewContainerRef);
service.createModal(DummyComponent).then(() => verifyModalCreated());
tick();
dispatchEscPressEvent();
tick(500);
verifyModalDestroyed();
}));


When using es2016, the test correctly simulates the passage of time and then calls verifyModalDestroyed(). However, when using es2018 or es2022, verifyModalDestroyed() will be called and the test will fail before the Promise resolves inside the destroyModal() method. It is as if tick() has no effect anymore after the update.

Can anyone help me understand that the issue is or what has changed between the versions that these kinds of tests would start failing?

Continue reading...