使用renderHook测试含Providers的自定义Hook时遇Hook调用错误求助

问题原因 #

你在调用renderHookWithProviders时，传入的回调是返回Hook函数的() => useNavigationHook，而非调用该Hook的逻辑。这导致result.current指向的是Hook函数本身，当你直接调用它时，脱离了React组件或自定义Hook的执行上下文，触发Hook规则报错。

修复方案 #

1. 修正Hook测试工具的调用代码 #

将传入renderHookWithProviders的回调改为直接调用目标Hook，让renderHook在合法上下文内执行Hook：

const { store, result } = renderHookWithProviders(
  // 调用useNavigationHook，返回其结果（navigateForwards函数）
  () => useNavigationHook(),
  {
    stateProviderProps: {
      formSettings: initialState(),
    },
    reduxState: {
      paging: mockPaging(),
      components: mockComponents(),
      navigation: mockNavigation(),
    },
  }
);

// 此时result.current是Hook返回的navigateForwards，直接调用即可
act(() => {
  result.current();
});

2. 确认工具本身的有效性 #

你的renderHookWithProviders工具逻辑是正确的，它通过Wrapper组件注入了Redux、Context等所有依赖的Provider上下文。核心问题仅在于调用时没有在renderHook的回调内执行Hook，导致Hook脱离了合法执行环境。

关键原理 #

React Hook规则强制要求：所有Hook必须在函数组件或自定义Hook的顶层调用。renderHook的作用就是创建一个虚拟的Hook执行上下文，因此你需要在它的回调里直接调用目标Hook，这样Hook的执行就处于合法环境中，返回的结果就是Hook的输出值（这里是navigateForwards函数），后续调用该函数就不会触发报错。

内容的提问来源于stack exchange，提问作者Jeremy