为什么我的测试因为找不到 redux 存储而失败？答案

【问题标题】：Why does my test fail because it cannot find the redux store?为什么我的测试因为找不到 redux 存储而失败？
【发布时间】：2020-12-11 16:11:17
【问题描述】：

我正在尝试测试我的应用程序路由是否呈现正确的组件并且我收到此错误：

Could not find "store" in the context of "Connect(withRouter())". Either wrap the root component
 in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(withRouter())
 in connect options.

在互联网上查找解决方案后，我无法弄清楚如何解决这个问题。我在所有组件的所有测试中都收到此错误。最初，我认为这与包装在 connect() 中时 withRouter 的反应方式有关，但事实并非如此。

我该如何克服这个错误，因为我的 redux 应用程序在前端和后端之前都可以正常运行。

【问题讨论】：

标签： reactjs redux enzyme router

【解决方案1】：

您需要使用测试提供程序进行测试，它将使用与应用程序相同的提供程序。例如：

  const TestProviders = ({ store, children }) => (
    <I18nextProvider i18n={i18nInstance}>
      <MemoryRouter>
        <ThemeProvider theme={theme}>
          <Provider store={store}>
            {children}
          </Provider>
        </ThemeProvider>
      </MemoryRouter>
    </I18nextProvider>
  )

如果您正在测试组件，则必须使用与应用程序中相同的提供程序。

const createComponent = (store, component) =>
  shallow(
    <TestProviders store={store}>
      {component}
    </TestProviders>,
  )

我会为你提出解决方案：

let store = createStore(rootReducer)

const createComponent = async (store, props) =>
  mount(
    <Provider store={store}>
      <TestedComponent {...props} />
    </Provider>,
  )

接下来您可以在测试中使用 createComponent 函数

【讨论】：

感谢您的回答，但似乎有些夸张。你能用几句话解释一下这一切背后的原因吗？你把所有 i18nInstance 组件都拉到哪里了？
我已经为示例添加了大量的提供程序，您不必全部使用它们。您只需要将您在提供程序中测试的组件包装在应用程序中使用的提供程序中

【解决方案2】：

import { createStore } from 'redux'

const reducer = ()=>{
  ...
}

const store = createStore(reducer)

 ...
  <Provider store={store}>
    <App />
  </Provider>
 ...

【讨论】：

【解决方案3】：

您需要使用 Provider 包装 Routes 并将 store 作为 prop 传递，以便可以通过不同的路由访问它

function App() {
  return (
    <Provider store={store}>
      <Routes />
    </Provider>
  );
}

【讨论】：

我的主要组件 - 应用程序 - 已经用带有商店的 Provider 包装了。
此时该应用程序过于复杂，组件过多，需要一段时间才能重现它，以便我可以分享它。但是如果你想知道我是如何设置的，我很乐意回答你。
您能否至少向我展示提供程序的实现以及您使用与Router 的路由实现。