如何通過將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';