Jest with experimental-vm-modules causing error 'No QueryClient set, use QueryClientProvider to set one'

[slax57]

Hi guys!
Just wanted to share my recent experience using Tanstack Query with Jest in ESM mode (i.e. with NODE_OPTIONS=--experimental-vm-modules), hoping this will help some 😇 .

The context

In my useMyHook.test.tsx test file I am doing the following:

test('My hook should return a result', async () => {
  let result;
  const MyComponent = () => {
    const myHookResult = useMyHook();
    result = myHookResult;
    return <span />;
  };
  render(
    <QueryClientProvider client={new QueryClient()}>
      <MyComponent />
    </QueryClientProvider>,
  );
  // ...
});

The useMyHook hook's implementation calls another hook (useLogout from react-admin), which internally calls useQueryClient() to access the queryClient instance.

useMyHook (my code)
    v
useLogout (react-admin)
    v
useQueryClient (@tanstack/react-query)

Now I should also mention that I am using Jest in ESM mode, with the following configuration (jest.config.ts):

import type { JestConfigWithTsJest } from 'ts-jest';

const config: JestConfigWithTsJest = {
  extensionsToTreatAsEsm: ['.ts', '.tsx'],
  setupFilesAfterEnv: ['./jest.setup.ts'],
  testEnvironment: 'jsdom',
  testPathIgnorePatterns: ['/lib/'],
  maxWorkers: 1,
  moduleNameMapper: {
    '^(\\.{1,2}/.*)\\.js$': '$1',
  },
  transform: {
    '^.+\\.tsx?$': [
      'ts-jest',
      {
        useESM: true,
      },
    ],
  },
};

export default config;

The problem

The problem is that when running my test, even though I am providing a QueryClient with QueryClientProvider, I am getting the following error:

No QueryClient set, use QueryClientProvider to set one

Of course, I have looked for duplicate versions of @tanstack/react-query in my yarn.lock file, but couldn't find any.
The problem turned out to be a little more complex, and related to Jest.

The analysis

After hours of scratching my head I finally managed to locate the issue: Jest was actually loading 2 versions of react-query, the ESM version and the CJS version.

More precisely, Jest was resolving:

• The import from my test file to node_modules/@tanstack/react-query/build/modern/QueryClientProvider.js (ESM)
• The import from react-admin code to node_modules/@tanstack/react-query/build/modern/QueryClientProvider.cjs (CJS)

Because of that, the reference to the QueryClientContext was not equal, and hence the error.

Now, I don't know exactly why Jest is resolving imports this way. I have tried many various configurations, but couldn't find one that works.

The only interesting thing I can point out is: it could be due to Jest not resolving correctly Tanstack Query's Conditional exports in the package.json file.

query/packages/react-query/package.json

Lines 39 to 51 in 14d9c49

	"exports": {
	".": {
	"import": {
	"types": "./build/modern/index.d.ts",
	"default": "./build/modern/index.js"
	},
	"require": {
	"types": "./build/modern/index.d.cts",
	"default": "./build/modern/index.cjs"
	}
	},
	"./package.json": "./package.json"
	},

Indeed, if I manually edit the file and remove these lines, then the problem disappears.

But, obviously, I can't do that in my project, so I had to find another solution.

Another side note I'd like to add, is that this issue is (probably) linked to using NODE_OPTIONS=--experimental-vm-modules. Indeed, react-admin itself does not have this issue with Jest tests, and is not using experimental-vm-modules, instead relying on ts-jest to transform all the source files used in the tests.
react-admin's Jest config file can be found here for reference.

The solution

The solution I found was to edit the Jest configuration to force it to use the same version of @tanstack/react-query all the time.
This can be achieved by editing the jest.config.ts like so:

import type { JestConfigWithTsJest } from 'ts-jest';

const config: JestConfigWithTsJest = {
  extensionsToTreatAsEsm: ['.ts', '.tsx'],
  setupFilesAfterEnv: ['./jest.setup.ts'],
  testEnvironment: 'jsdom',
  testPathIgnorePatterns: ['/lib/'],
  maxWorkers: 1,
  moduleNameMapper: {
    '^(\\.{1,2}/.*)\\.js$': '$1',
+   '^@tanstack/react-query$':
+     '<rootDir>/node_modules/@tanstack/react-query/build/modern/index.cjs',
  },
  transform: {
    '^.+\\.tsx?$': [
      'ts-jest',
      {
        useESM: true,
      },
    ],
  },
};

export default config;

This leverages moduleNameMapper to force Jest to use the CJS version all the time.

Hopefully, this solution can help other people having the same issue.

Now, if someone has a better solution to this, I would be very interested to hear about it! 🙂
Cheers!