Invalid hook call. Using react testing library and react query

Question

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([]);
  });
});

Answer 1

I ended up uninstalling react test renderer, and it worked. not sure why, but the project wasn't using this package.