Question

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

不变违规：无法找到＆＃34;存储＆＃34;在＆＃34; Connect（）＆＃34;的上下文或道具中。将根组件包装在＆lt; Provider＆gt;中，或者显式传递＆＃34; store＆＃34;作为＆＃34; Connect（）＆＃34;的支柱。

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

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

在页面上渲染Component时，它可以正常工作。但是在测试中，我无法将存储明确地传递给Component。

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

Answer 1

connect是由react-redux提供的装饰器。对redux的组件connect是一个智能组件，并期望商店可以通过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

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

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 3

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

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。

如何明确地将商店作为道具传递给＆＃34; Connect（）＆＃34;

3 个答案: