无效的钩子调用使用反应测试库和反应查询

如何解决无效的钩子调用使用反应测试库和反应查询

我很困惑为什么我会收到这个错误，因为有一个无效的钩子调用。我正在尝试遵循以下简单示例：

。测试这个简单的功能，任何指导或帮助表示赞赏，因为我不知道要查看什么才能解决这个问题；

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,{
         |                                 ^
      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,{
      wrapper: createWrapper(),});

    await waitFor(() => {
      return result.current.isSuccess;
    });

    expect(result.current).toEqual([]);
  });
});

解决方法

我最终卸载了 react test renderer，并且成功了。不知道为什么，但该项目没有使用这个包。