Create React App测试用例全失败：Connect(Login)找不到store报错

嘿，我碰到过一模一样的问题！这个错误的核心原因很明确：你的Connect(Login)组件没法拿到Redux Store——要么是没有用Provider把整个应用根组件包裹起来，要么没给这个连接组件显式传递store属性。

咱们直接从你的index.js入手修改，步骤很清晰：

1. 导入react-redux的Provider组件 #

首先在你的index.js里补上这行导入：

import { Provider } from 'react-redux';

2. 完整创建Redux Store #

把你创建store的代码补全（如果之前没写完的话），比如：

import { createStore, applyMiddleware } from 'redux';
// 如果用到了中间件（比如redux-thunk），记得先导入
// import thunk from 'redux-thunk';

// 创建store实例，把reducer传进去，有中间件就加上applyMiddleware
const store = createStore(
  reducer,
  // applyMiddleware(thunk) // 有中间件的话取消注释这行
);

3. 用Provider包裹根组件 #

最后修改渲染代码，把Routes组件放在Provider里面，并且把创建好的store传给Provider的store属性：

ReactDOM.render(
  <Provider store={store}>
    <Routes />
  </Provider>,
  document.getElementById('root')
);

这么做的原因是：Provider是react-redux提供的全局容器组件，它会通过React的Context机制把Store传递给所有子组件里的connect高阶组件，这样所有被connect包装的组件（比如你的Login）都能自动获取到Store，不用每个组件都手动传storeprop。

额外：如果是测试单个组件的情况 #

要是你在写测试用例时遇到这个错误，也可以直接给被connect包装的组件传storeprop，比如测试文件里这么写：

import { createStore } from 'redux';
import reducer from '../reducers';
import Login from '../components/Login';

const testStore = createStore(reducer);

// 渲染时直接传入store
render(<Login store={testStore} />);

内容的提问来源于stack exchange，提问作者Atul kumar singh