Using urql's useMutation hook inside tests yields "TypeError: Cannot read properties of undefined (reading '__H')" error possibly because of currentComponent in getHookState is undefined

Describe the bug I’m getting TypeError: Cannot read properties of undefined (reading '__H') error on test environment when rendering a component which uses urql’s useMutation hook. The component renders without a problem on browser.

Project structure @preact/preset-vite + @urql/preact + vitest + @testing-library/preact

About the hook

Link to source code of useMutation.

Please see the source code of the hook, it looks fine imho. I don’t see any problem with its implementation.

As far as I could debug the problem and dug into the source code of Preact hooks, I saw that this line yields the error.

https://github.com/preactjs/preact/blob/d4a301391c21632828a1a9c19e08486a18075974/hooks/src/index.js#L107

Because, at the time of calling getHookState function, currentComponent variable is undefined. So, trying to access currentComponent.__hooks fails.

Error output

 FAIL  src/Home.test.tsx > Home > should render Home
TypeError: Cannot read properties of undefined (reading '__H')
 ❯ m file:/Users/emrebaba/sandbox/preact/vite-preact-test/node_modules/preact/hooks/dist/hooks.mjs:1:151
 ❯ d file:/Users/emrebaba/sandbox/preact/vite-preact-test/node_modules/preact/hooks/dist/hooks.mjs:1:792
 ❯ s file:/Users/emrebaba/sandbox/preact/vite-preact-test/node_modules/preact/hooks/dist/hooks.mjs:1:628
 ❯ Module.useMutation file:/Users/emrebaba/sandbox/preact/vite-preact-test/node_modules/@urql/preact/dist/urql-preact.mjs:225:11
 ❯ d.Home [as constructor] src/Home.tsx:14:27
     12|
     13| export const Home = () => {
     14|   const [result, mutate] = useMutation(mutation);
       |                           ^
     15|
     16|   return <div>Hello world!</div>;
 ❯ d.M [as render] node_modules/preact/dist/preact.js:1:7851
 ❯ I node_modules/preact/dist/preact.js:1:5598
 ❯ m node_modules/preact/dist/preact.js:1:2096
 ❯ I node_modules/preact/dist/preact.js:1:5831
 ❯ m node_modules/preact/dist/preact.js:1:2096

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯

Test Files  1 failed (1)
     Tests  1 failed | 1 passed (2)
      Time  2.18s (in thread 6ms, 39248.40%)

To Reproduce I created a simple repository to show the issue => https://github.com/EmreErdogan/vite-preact-test

Steps to reproduce the behavior:

1. Clone the repository (sorry, couldn’t make the tests play nice with CodeSandbox/Stackblitz environments)
2. cd into it and run npm install
3. run npm run test

Expected behavior Test should succeed.

[RapidOwl]

@EmreErdogan I just ran into this issue with Preact + Vitest and found this solution on a similar issue on the Vitest repo: https://github.com/vitest-dev/vitest/issues/1652#issuecomment-1195323396. Forcing the aliased module to load using require fixed it for me.

Stuck this at the top of my vite.config.js:

import { createRequire } from 'module';

const require = createRequire(import.meta.url);

Then I’ve got a resolve section in the object I pass to defineConfig.

resolve: {
	alias: [
		{
			find: 'preact/hooks',
			replacement: require.resolve('preact/hooks')
		}
	]
}

This is apparently due to the way Vite imports unprocessed modules. I don’t really understand the CJS vs ESM madness and wish it wasn’t a thing.

Weirdly, I only had this problem with preact/hooks. htm/preact worked fine without require.

[EmreErdogan]

Really appreciate that. I’d happily contribute to this if you direct me to the correct path 😬