如何對該將Redux連接到React組件的實用程序進行單元測試？

Question

我有一個名為“ reduxify”的“實用程序”，它會自動為您執行很多Redux / React樣板，因此您不必像在每個組件上編寫“ mapStateToProps”和“ mapDispatchToProps”功能，而是像這樣編寫組件：

// usage. 

class Foo extends Component {
  // component stuff
}

export default reduxify(actions, Foo); 

Reduxify函數（帶有注釋）位於以下要點： https ://gist.github.com/brianboyko/904d87da2a75c98e8cd5f5352dd69d57

沒有評論（為簡潔起見），它的產生如下：

import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { getStore } from '../store/storeConfig'

export function reduxify(actions, component){ 
  let mapStateToProps = (state) => {
    state = Object.assign({}, state, {store: state}, {getStore: getStore});
    return (state);
  }
  let prepareActions = (actions) => (dispatch) =>
    ({ actions: bindActionCreators(actions.default, dispatch),
       dispatch: dispatch,
     })
  let mapDispatchToProps = (dispatch) => (prepareActions(actions, dispatch))
  return connect(mapStateToProps, mapDispatchToProps)(component);
}

所以，這是一個問題：模擬組件（可以訪問提供者的組件）的最佳方法是什么，以便我可以對該吸盤進行單元測試，將其放到那里以供人們使用和使用，而不是像黑客一樣？

Answer 1

看一下react-redux使用的單元測試，以獲取有關如何測試<Provider>包裝的組件的示例： https : //github.com/reactjs/react-redux/blob/master/test/components /Provider.spec.js#L50-64 。 基本上，他們只是聲明了一個組件，然后用<Provider>組件將其包裝，該組件的store道具是模擬的Redux商店。 （他們正在使用“ react-addons-test-utils”進行測試組件渲染，但是使用酶將更加容易。）

在您的情況下，您可以監視模擬商店的dispatch()方法，以確保組件的動作調度道具正在按預期方式對其進行調用。