Angular 21 Vitest, FakeTimers and RXJS DebouceTime
08:44 21 Nov 2025

need some help!!!!

I could successfully migrate my Angular20/Jasmine/Karma app to Angular21/Vitest

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

AS workaround for now, ny unit test works as follow (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


protected searchInput= new UntypedFormControl();

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

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

Any suggestion is much appreciated,

Thanks

angular rxjs angular-cli vitest angular-devkit