如何通过将Redux连接的React组件导出为PureComponent来测试它？

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';