挂钩调用无效。使用react测试库和react查询

Question

我不明白为什么我会收到这个错误，因为有一个无效的钩子调用。我正在尝试遵循https://react-query.tanstack.com/guides/testing中的简单示例。要测试这个简单的功能，任何指导或帮助都是非常感谢的，因为我不知道要看什么才能修复这个问题；

export const useScenarios = (): UseQueryResult<Array<IScenario>, any> => {
  return useQuery(SCENARIOS, getScenarios);
};

这是日志

● 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)

下面是我的代码

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

我最终卸载了react test renderer，它起作用了。不知道为什么，但是这个项目没有使用这个包。