1

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([]);
  });
});
1
  • I'm also having the same issue. Please update if you find the solution. Commented Apr 22, 2021 at 10:15

1 Answer 1

1

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

Sign up to request clarification or add additional context in comments.

1 Comment

This fixed my issue as well. It may be that there's an incompatibility between the two libraries.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.