0

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.

1
  • 1
    vitest fake timers don't advance rxjs schedulers by default (unlike jasmine.clock), so your debounceTime just sits there forever and the test hangs. So drop the await delayInTests(500) forever, it will be instant and clean like jasmine was. Commented 13 hours ago

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.