19

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

不变违规：在“Connect()”的上下文或道具中找不到“商店”。要么将根组件包装在 <Provider> 中，要么将“store”作为道具显式传递给“Connect()”。

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

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

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

有人可以指出正确的方向吗？

4

3 回答 3

6

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

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

于 2018-10-23T15:24:02.960 回答
5

connect是由 提供的装饰器react-redux。一个connected 到 redux 的组件是一个智能组件，它期望 store 可以通过 aprop或错误消息通过 a 可用Provider。

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

这是一种将 提供store给import订阅store.

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

component = TestUtils.renderIntoDocument(
  <Provider store={store(initialState)}>
    {() => <SideMenu />}
  </Provider>
);
于 2015-11-10T03:00:03.347 回答
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.

于 2015-11-28T17:05:59.557 回答