Angular - Problems with unit tests

[jonath92]

I have tested TanStack Query for Angular and I really like it so far but I have big problems with unit testing. I even don't get the most basic tests do work unfortunately. Here you can find two really basic test example which should work but don't. The stacklitz example is using Karma but I had the same problems locally with jest ( "jest": "^29.7.0", "jest-preset-angular": "^14.0.3)

First Problem: Angular HarnessLoader ends in timeout

The first "test" is just these lines :

  it('using MatSelectHarness', async () => {
    const select = await loader.getHarness(MatSelectHarness);
  });

But it returns the error: Async function did not complete within 5000ms. The same example is working, when commenting out the query in the select-overview-example.ts and the select-overview-example.html file. I also played a little around with some deviations of the test (waitForAsync, detectChagens, ...) but without luck

Second Problem: The Query stays pending forever in the unit test

The second unit test is :

  it('waiting for queryStatus', fakeAsync(() => {
    tick(20);
    flush();
    const label = fixture.nativeElement.querySelector('mat-label');
    expect(label.textContent).toContain('success');
  }));

The test also fails as the the text stays "pending" forever. When you open the page normally you however see, that it is immediately changing to "success". Also here I tried some deviations but without luck.

Anyone getting it to work already? Any help is much appreciated.

[eliellis]

Also having the same issues with jest@30.0.5, @angular@^20 and jest-preset-angular@15.0.0. No amount of fakeAsync(), TestBed.tick(), or await fixture.whenStable() calls seem to be working. I imagine unit testing has to work right? I feel like I'm just misunderstanding the documentation or something. If anyone has any insight here that would be greatly appreciated–otherwise this library is awesome!