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.