I'm confused why I'm getting this error, that there is an invalid hook call. I am trying to follow the simple example from: https://react-query.tanstack.com/guides/testing. to test this simple function, any guidance or help is appreciated, as I don't know what to look into in order to fix this;
export const useScenarios = (): UseQueryResult<Array<IScenario>, any> => {
return useQuery(SCENARIOS, getScenarios);
};
Here is the log
● Console
console.error
The above error occurred in the <QueryClientProvider> component:
in QueryClientProvider (at scenario.test.tsx:11)
in Unknown
in Suspense
in ErrorBoundary
React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.
at consoleObject.<computed> [as error] (../../../../node_modules/filter-console/index.js:46:4)
at logCapturedError (../../../../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10141:21)
at logError (../../../../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10178:5)
at ErrorBoundary.update.payload (../../../../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11303:7)
at getStateFromUpdate (../../../../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:3062:35)
at processUpdateQueue (../../../../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:3193:22)
at resumeMountClassInstance (../../../../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:3840:3)
at updateClassComponent (../../../../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7563:20)
● useScenarios › is defined correctly
Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See for tips about how to debug and fix this problem.
24 | // const { result, waitFor } = renderHook(() => useScenarios(), { wrapper });
25 |
> 26 | const { result, waitFor } = renderHook(() => useScenarios(), {
| ^
27 | wrapper: createWrapper(),
28 | });
29 |
at resolveDispatcher (../../../../node_modules/react/cjs/react.development.js:1465:13)
at Object.useEffect (../../../../node_modules/react/cjs/react.development.js:1508:20)
at QueryClientProvider (../../../../node_modules/react-query/lib/react/QueryClientProvider.js:50:18)
at renderWithHooks (../../../../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:5552:18)
at mountIndeterminateComponent (../../../../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7918:13)
at beginWork (../../../../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9019:16)
at performUnitOfWork (../../../../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12649:12)
at workLoopSync (../../../../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12622:22)
at performSyncWorkOnRoot (../../../../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12333:9)
at ../../../../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1825:24
at unstable_runWithPriority (../../../../node_modules/scheduler/cjs/scheduler.development.js:653:12)
at runWithPriority (../../../../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1775:10)
at flushSyncCallbackQueueImpl (../../../../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1820:7)
at flushSyncCallbackQueue (../../../../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1808:3)
at batchedUpdates (../../../../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12401:7)
at act (../../../../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14936:14)
at render (../../../../node_modules/@testing-library/react-hooks/lib/native/pure.js:73:34)
at renderHook (../../../../node_modules/@testing-library/react-hooks/lib/core/index.js:114:5)
at _callee$ (src/hooks/__tests__/scenario.test.tsx:26:33)
at tryCatch (../../../../node_modules/regenerator-runtime/runtime.js:63:40)
at Generator.invoke [as _invoke] (../../../../node_modules/regenerator-runtime/runtime.js:293:22)
at Generator.next (../../../../node_modules/regenerator-runtime/runtime.js:118:21)
at asyncGeneratorStep (../../../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24)
at _next (../../../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:25:9)
at ../../../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:32:7
at Object.<anonymous> (../../../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:21:12)
and here is my code
const createWrapper = () => {
const queryClient = new QueryClient();
return ({ children }) => (
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
);
};
describe('useScenarios', () => {
it('is defined correctly', async () => {
const queryClient = new QueryClient();
const wrapper = ({ children }) => (
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
);
const expectation = nock('hidden').get('/v1/scenarios').reply(200, []);
const { result, waitFor } = renderHook(() => useScenarios(), {
wrapper: createWrapper(),
});
await waitFor(() => {
return result.current.isSuccess;
});
expect(result.current).toEqual([]);
});
});
I ended up uninstalling
react test renderer, and it worked. not sure why, but the project wasn't using this package.