Angular 21 Vitest, FakeTimers and RxJS debounceTime

I could successfully migrate my Angular 20/Jasmine/Karma app to Angula r21/Vitest

All my tests are running correctly, except the ones that use debounceTime from RxJS

As a workaround for now, ny unit test works as follows (you can see I created a delayInTests just to pass real time while I try figure out a solution. This is working, but not ideal):

const inputElement = fixture.debugElement.query(By.css('#searchinput')).nativeElement;
// Set the value of the input and simulate the 'input' event
inputElement .dispatchEvent(new Event('focusin'));
inputElement .value = 'value'; // Simulate user typing
inputElement .dispatchEvent(new Event('input'));

await delayinTests(500); // Simulate debounce time

await fixture.whenStable();

const reqHttp = httpTestingController.expectOne({
method: 'GET',
url: 'expectedUrl to be called',
});


Before, with Jasmine, I could just use clock(), and worked perfectly:

jasmine.clock().install();
jasmine.clock().mockDate();
// ... and inside the test itself
jasmine.clock().tick(500); (instead of my real delayInTest())


When I tried to use Vitest fake timers, my tests were hanging without finishing and timing out.

vi.useFakeTimers();
// ... and inside the test itself
vi.advanceTimersByTime(500)


My real code where debounceTime is used is this

<input id="searchinput" [formControl]="searchInput"/>
protected searchInput= new UntypedFormControl();

this.filteredOptions$ = this.searchInput.valueChanges.pipe(
debounceTime(500),
distinctUntilChanged(),
.....
callApi
);


I tried mocking debouceTime scheduler, RxJS operators and nothing really passed virtual time.

Continue reading...