Invariant Violation when testing hook that uses npm-imported hook

[abuinitski]

I'm trying to test my custom hook that is based on another hook imported from an npm package (useConnect).

So the call chain is: useMyCustomHook -> calling useConnect -> calling stock react hooks

When calling this in a React component in browser it works great.

When running inside renderHook test harness (with jest) it immediately throws an "Invariant Violation: Hooks can only be called inside the body of a function component". It is raised from inside useConnect when it tries to invoke it's first hook.

When I don't import useConnect and just copy-paste it's source code (so it's transformed by jest's babel rather than imported from a "production" build of the package) – again it works flawlessly.

What am I missing?

[mpeyper]

Can you share a repo or make a codesandbox that replicates the issue? That warning is literally why this library exists.

A common cause for seeing this error when you don't expect it is if there are duplicate versions of react, which might explain why it works when you paste the source code into you project instead of when it's situated in node_modules. npm ls react might give you some clues here. This is also easy to do if you're using npm link for local installation or a tool like lerna for managing monorepos.

[abuinitski]

@mpeyper thank you!

You are totally right, I had my other hook npm-linked to my development package, and seems like it had a different react version installed in it's node_modules.

Works like a charm now 🥇

Should I close the issue? It's a question of hating hanging tickets vs. stuff others could experience and should know.

[mpeyper]

Closing is fine.