Jest Enzyme 测试错误：在“Connect(App)”的上下文中找不到“store”

Question

我有 index.js 文件，其中包含：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App'
import * as serviceWorker from './serviceWorker';
import {combineReducers,createStore,compose,applyMiddleware} from 'redux'
import {Provider} from 'react-redux'
import thunk from 'redux-thunk'
import { HashRouter } from 'react-router-dom';
import playerReducer from './store/Player/PlayerReducers'
import cardReducer from './store/Cards/cardsReducer'
import playersReducer from './store/Players/PlayersReducer'
import stylesReducer from './store/Styles/StylesReducer'
import gameReducer from './store/Game/gameReducer'
const rootReducer = combineReducers({
    player: playerReducer,
    cards:cardReducer,
    players:playersReducer,
    styles:stylesReducer,
    game:gameReducer
})
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(rootReducer, composeEnhancers(applyMiddleware(thunk)))
ReactDOM.render(
    <Provider store={store}>
     <HashRouter >
      <App />
     </HashRouter>
</Provider>
    , document.getElementById('root'));

serviceWorker.unregister();

export default store

我有 App.js 文件，其中包含：

import React, { PureComponent, Suspense } from 'react'
import {connect} from 'react-redux'
import './App.css'
import SignUp from './Register/SignUp'
import SignIn from './Register/SignIn'
import * as stylesActions from './store/Styles/StylesActions'
import Entrance from './components/Entrance/Entrance'
import Profile from './components/Profile/Profile'
import NotFound from './UI/NotFound/NotFound'
import Fallback from './UI/Fallback/Fallback'
import { Route, Switch } from 'react-router-dom'
const Lobby = React.lazy(() => import("./Lobby/Lobby"))
const Game = React.lazy(() => import('./containers/Game/Game'))


class App extends PureComponent {

  render() {
    return (
        <div className="App"
        data-test="App-component"
        >
         <Switch>
         <Route path="/" exact render={() => (
        <Suspense fallback={
      <Fallback />
      }>
          <Entrance />
        </Suspense>
      )} />
    <Route  path="/auth/signup" exact  component={SignUp}/>
      <Route  path="/auth/signin" exact  component={SignIn}/> 
      <Route  path="/lobby" exact render={() => (
        <Suspense fallback={
      <Fallback />
      }>
          <Lobby />
        </Suspense>
      )}/>
      <Route  path="/profile" exact component={Profile}/>
      <Route path="/game" exact render={() => (
        <Suspense fallback={
      <Fallback />
      }>
          <Game />
        </Suspense>
      )} />
      <Route  component={NotFound} />
    </Switch>

        </div>
)
}
}



const mapDispatchToProps = (dispatch) => {
  return {
    onChangeMusicStatus:(arg) => dispatch(stylesActions.musicPaused(arg))

  }
  }
  
  const mapStateToProps = (state) => {
      return {
  player: state.player,
  styles:state.styles,
  players:state.players
      }
  }

  export default connect(mapStateToProps, mapDispatchToProps)(App)

当我尝试测试时它给了我这个错误

在“Connect(App)”的上下文中找不到“store”。要么将根组件包装在 a 中，要么将自定义的 React 上下文提供者传递给连接选项中的 Connect(App)，并将相应的 React 上下文消费者传递给。

Answer 1

你使用的是什么版本的 react-redux，你能发布你的测试吗，如果你使用的是 react-redux 7，你必须用 Provider 包装你的文本组件：

const TestComponent = <Provider store={store}><App /></Provider>
your test code here...

您也可以只导出App 组件（不是连接的）并单独测试它。