测试自定义钩子：不变违规：找不到 react-redux 上下文值；请确保组件包装在 <Provider>

Question

我有一个要测试的自定义钩子。它接收一个 redux store 调度函数并返回一个函数。为了得到我想要做的结果：

 const { result } = renderHook(() => { useSaveAuthenticationDataToStorages(useDispatch())});

但是，我收到一个错误：

不变违规：找不到 react-redux 上下文值；请确保组件被包裹在一个

这是因为 useDispatch 并且没有连接商店。但是，我这里没有任何组件可以与提供程序一起包装。我只需要测试挂钩，它只是将数据保存到商店。

我该如何解决？

原文由 Yonatan Nir 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

反应钩子测试库 文档 对此进行了更深入的介绍。但是，我们本质上缺少的是可以通过创建包装器获得的提供程序。首先我们声明一个组件作为我们的提供者：

 import { Provider } from 'react-redux'

const ReduxProvider = ({ children, reduxStore }) => (
  <Provider store={reduxStore}>{children}</Provider>
)

然后在我们的测试中我们调用

test("...", () => {
  const store = configureStore();
  const wrapper = ({ children }) => (
    <ReduxProvider reduxStore={store}>{children}</ReduxProvider>
  );
  const { result } = renderHook(() => {
    useSaveAuthenticationDataToStorages(useDispatch());
  }, { wrapper });
  // ... Rest of the logic
});

原文由 Jose Felix 发布，翻译遵循 CC BY-SA 4.0 许可协议