Unit testing with Preact: Cannot read properties of null (reading 'useEffect')

[philipmw]

Describe the bug

When I use the latest version of Tanstack Query with the latest version of Preact, I am not able to write a working unit test.

In short, when I render() any JSX wrapped in a <QueryClientProvider> as per the Testing section of the docs, I get this error:

TypeError: Cannot read properties of null (reading 'useEffect')
 ❯ Module.process.env.NODE_ENV.exports.useEffect node_modules/react/cjs/react.development.js:1473:33
 ❯ x.constructor node_modules/@tanstack/react-query/src/QueryClientProvider.tsx:33:9
 ❯ x.render node_modules/preact/src/diff/index.js:659:14
 ❯ diff node_modules/preact/src/diff/index.js:240:14
 ❯ diffChildren node_modules/preact/src/diff/children.js:96:16
 ❯ diff node_modules/preact/src/diff/index.js:262:13
 ❯ diffChildren node_modules/preact/src/diff/children.js:96:16
 ❯ diff node_modules/preact/src/diff/index.js:262:13
 ❯ D node_modules/preact/src/render.js:42:2
 ❯ node_modules/@testing-library/preact/dist/esm/pure.mjs:48:7
     46|       preactHydrate(wrapUiIfNeeded(ui), container);
     47|     } else {
     48|       preactRender(wrapUiIfNeeded(ui), container);
       |       ^
     49|     }
     50|   });

Whereas when I remove the <QueryClientProvider> wrap, then the JSX renders.

I wrote a minimal reproducible test case here:

Your minimal, reproducible example

https://github.com/philipmw/testing-tanstack-query-with-preact

Steps to reproduce

1. Check out the minimal reproducible test case repo
2. npm test

Expected behavior

unit tests pass.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

macOS, jsdom environment of vitest

Tanstack Query adapter

react-query

TanStack Query version

5.64.2

TypeScript version

5.4.5

Additional context

No response

[SpringHgui]

+1

[TkDodo]

see:

• Preact + @tanstack/react-query returns TypeError: Cannot read properties of null (reading 'useEffect') vitest-dev/vitest#5004