如何将商店显式传递给 "Connect()"

Question

我正在尝试测试我的 React 组件并收到以下错误。

Invariant Violation: Could not find "store" in either the context or props of "Connect()". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect()".

在测试中渲染组件时出现错误。

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

在页面上渲染组件时，它工作正常。但是在测试中，我无法将商店显式传递到组件中。

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

Answer 1

connect是react-redux提供的装饰器。 connected 到 redux 的组件是一个智能组件，它期望存储可以通过 prop 或如错误消息所述通过 Provider.

可用

在测试智能组件时，您可以提供模拟商店作为 prop。但是，当线下有另一个子组件时，谁期望 store，prop 方式将不起作用。

这是一种将 store 提供给 import 订阅 store 的子组件的组件的方法。

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

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

Answer 2

在大多数情况下，我发现在测试中导入组件本身对我来说效果很好。

SideMenu.js:

export class SideMenu extends React.Component {
 // implementation
}

export default connect(mapStateToProps,)(SideMenu)

SideMenu.spec.js:

import { SideMenu } from 'path/to/SideMenu.js'

const props = {
  // provide all necessary stubs and mocks for redux props and actions 
}
component = TestUtils.renderIntoDocument(<SideMenu {...props} />);

注意：正如 Салман 指出的那样，当有另一个子组件需要 store.

时，这种方法将不起作用。

Answer 3

要回答这个问题（我运行进入这个问题并且接受的答案不是我需要的），创建一个新方法，例如：

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

如何将商店显式传递给 "Connect()"

How to pass store explicitly into as a prop to "Connect()"

phantomjs

reactjs

redux

react-redux