Question

我一直在寻找一种我知道可行的解决方案，但语法却让我感到沮丧。这是场景：

您有一个如下导出的redux连接组件：

export default connect(mapStateToProps, mapDispatchToProps)(componentToExport);

您需要测试该组件，而不是在酶中看到此错误：

Could not find "store" in either the context or props of "Connect(componentToExport)"

解决方案如下所示。

在正在测试的组件的底部，您有：

export default connect(mapStateToProps, mapDispatchToProps)(componentToExport);
export default componentToExport as PureComponentToExport

我尝试过使用：

import from React, { PureComponent }

然后使用

创建组件

extends PureComponent

但是这没有按预期工作。酶应该在文档中真正涵盖这个：/

非常感谢任何帮助。我不想包含外部库，或者将商店传递给正在测试的组件等。我希望能够使用我以前见过的这种语法。

谢谢：）

Answer 1

这样做的方法是也导出未连接的组件，例如通过在其定义中添加export或使用显式导出：

export default connect(mapStateToProps, mapDispatchToProps)(YourComponent);
export YourComponent;

然后使用像

这样的命名导入在测试中导入它

import { YourComponent } from '../YourComponent';

有关于在redux docs中测试连接组件的更多信息。

Answer 2

import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import ChildComponent from './ChildComponent';


export class YourComponent extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <ChildComponent/>
    );
  }
}

function mapStateToProps(state, ownProps) {
  return {
    state,
  };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators(
    {
    yourActionsGoHere,
    },
    dispatch
  );
}

export default connect(mapStateToProps, mapDispatchToProps)(YourComponent);

在您的酶测试中，您需要：

import { YourComponent } from '../YourComponent';

如何通过将redux连接的反应组件作为PureComponent导出来测试它？

2 个答案: