如何明确地将商店作为道具传递给"Connect()"

Question

我试图测试我的React组件并得到以下错误.

不变违规:无法在"连接()"的上下文或道具中找到"存储".将根组件包装在<Provider>中,或者显式地将"store"作为prop传递给"Connect()".

在测试中渲染Component时出错.

beforeEach(() => {
  Component = TestUtils.renderIntoDocument(<SideMenu />);
});

在页面上呈现Component时,它工作正常.但是在测试中,我无法将存储明确地传递给Component.

有人能指出正确的方向吗？

Answer 1

要回答这个问题（我遇到了这个问题，接受的答案不是我需要的），创建一个新方法，如：

function connectWithStore(store, WrappedComponent, ...args) {
  let ConnectedWrappedComponent = connect(...args)(WrappedComponent)
  return function (props) {
    return <ConnectedWrappedComponent {...props} store={store} />
  }
}

然后，对于连接，请使用：

const ConnectedApp = connectWithStore(store, App, mapStateToProps, mapDispatchToProps,)

export default ConnectedApp;

见这里：https : //github.com/reactjs/react-redux/issues/390#issuecomment-221389608

Answer 2

connect是由提供的装饰器react-redux。A组分connectED到终极版是一个智能型组件，并期望存储或者通过可用prop或作为错误信息经由说Provider。

在测试智能组件时，您可以将模拟商店作为提供prop。但是，如果线下还有另一个子组件，谁期望子组件store，则该prop方法将行不通。

下面是提供一种方式store，以一个组件，import其签约的SA子组件store。

const initialState = {key: 'value'};
const store = createStore(initialState);

component = TestUtils.renderIntoDocument(
  <Provider store={store(initialState)}>
    {() => <SideMenu />}
  </Provider>
);