Cannot find module @tanstack/angular-query-experimental in jest test

[ThiloAschebrock]

Describe the bug

I am using Angulary Query in conjunction with test setup with jest. Ever since Angular Query version 5.60.0, all tests that import from @tanstack/angular-query-experimental fail with Cannot find module '@tanstack/angular-query-experimental':

Test suite failed to run

    Cannot find module '@tanstack/angular-query-experimental' from 'src/app/app.component.spec.ts'

      1 | import { TestBed } from '@angular/core/testing';
    > 2 | import {
        | ^
      3 |   provideTanStackQuery,
      4 |   QueryClient,
      5 | } from '@tanstack/angular-query-experimental';

      at new ModuleNotFoundError (node_modules/jest-resolve/build/ModuleNotFoundError.js:79:5)
      at Object.<anonymous> (src/app/app.component.spec.ts:2:1)

See minimal example at https://stackblitz.com/edit/qiyn4c. All versions up to 5.59.20 are able to import without issues though.

Your minimal, reproducible example

https://stackblitz.com/edit/qiyn4c

Steps to reproduce

1. run npm test in the console

Expected behavior

Jest test able to import from @tanstack/angular-query-experimental.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

Node 20, 22

Tanstack Query adapter

angular-query

TanStack Query version

v5.61.5

TypeScript version

v5.6.3

Additional context

I understand that this might require a configuration change in my test setup, but am still wondering what changes in 2459701 triggered this issues and if this was an intentional change.

[arnoud-dv]

This is probably due to Jest not directly supporting ES modules so these need to be transformed to commonjs.

I don't think 5.60.0 is actually the cut off point where it doesn't work anymore as I got that version working with Jest locally with your repro code.

If you have a choice I would suggest to move to Vitest, its API is almost identical to Jest, is much faster and has full support for ESM.

But many people still depend on Jest so I will look into this, if anyone has any ideas how to fix this please add a comment.

[arnoud-dv]

Hi, @ThiloAschebrock this should be fixed in v5.61.6. I cannot reproduce it anymore with that version.

Please let me know if this solves it for you too.

[ThiloAschebrock]

Hi @arnoud-dv,
the issue is indeed resolved with v5.61.6. The cut off is definitely 5.60.0, I have tested it with several version to pinpoint the breaking point.

I would love to switch to vitest, but without switching to the analogjs platform this yet seems to be largely unsupported for Angular.

[ThiloAschebrock]

Actually, while this is fixing the import, it now throws the following issue when actually running a test that uses Tanstack Query with jest:

node:internal/modules/esm/utils:266
    throw new ERR_VM_DYNAMIC_IMPORT_CALLBACK_MISSING_FLAG();
          ^
 
TypeError: A dynamic import callback was invoked without --experimental-vm-modules
    at importModuleDynamicallyCallback (node:internal/modules/esm/utils:266:11)
    at EffectHandle.effectFn (node_modules/@tanstack/angular-query-experimental\src\providers.ts:288:11)

[arnoud-dv]

I changed the test in your repro to this:

import {fakeAsync, TestBed, tick} from '@angular/core/testing';
import {
    injectQuery,
    provideTanStackQuery,
    QueryClient,
} from '@tanstack/angular-query-experimental';

describe('TanstackQuery', () => {
    it('testing', fakeAsync(() => {
        TestBed.configureTestingModule({
            providers: [provideTanStackQuery(new QueryClient())],
        });

        const query = TestBed.runInInjectionContext(() =>
            injectQuery(() => ({
                queryKey: ['todos'],
                queryFn: () =>
                    Promise.resolve('some data')
            })),
        )

        tick()

        expect(query.data()).toBe('some data');
    }))
});

And it runs green. What version of Jest and Node are you using?

[arnoud-dv]

If I add withDevtools I do get the error but I don't see why anyone would need that in a unit test.

        TestBed.configureTestingModule({
            providers: [provideTanStackQuery(new QueryClient(), withDevtools())],
        });

[ThiloAschebrock]

Thank you very much for investigating. You are correct that this error is triggered by including the dev tools. This came up for my project, as I had abstracted the the provider setup into a custom provider function so that I can easily run the tests with the same query client configuration as used in the application. Obviously, the dev tools part wasn't needed in the unit tests and, consequently, I was able to resolve this issue by splitting the application and test setup for TanStack Query.