Wie würde ich dieses Dienstprogramm testen, das Redux mit React-Komponenten verbindet?

Question

Ich habe ein "Dienstprogramm" namens "Reduxify", das automatisch viele der Redux/React-Boilerplates für Sie ausführt, so dass Sie statt "mapStateToProps" und "mapDispatchToProps" Funktionen für jede Komponente schreiben Sie Ihre Komponente wie folgt :

// usage. 

class Foo extends Component { 
    // component stuff 
} 

export default reduxify(actions, Foo); 

Die reduxify Funktion (mit Kommentaren) an diesem Kern sind: https://gist.github.com/brianboyko/904d87da2a75c98e8cd5f5352dd69d57

Ohne die Kommentare (der Kürze halber), ist es unten hergestellt:

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); 
} 

Also, hier ist die Frage: Was ist der beste Weg, eine Komponente zu verspotten (eine, die Zugriff auf den Provider haben wird), so dass ich diesen Sauger testen kann, es für die Menschen zu verwenden und zu genießen, und nicht wie ein hacken?

Answer 1

Werfen Sie einen Blick auf die Komponententests, die von react-redux für ein Beispiel zum Testen einer Komponente verwendet werden, die von <Provider>: https://github.com/reactjs/react-redux/blob/master/test/components/Provider.spec.js#L50-64 gewickelt wird. Im Grunde haben sie nur eine Komponente deklariert und dann mit einer <Provider> Komponente umschlossen, deren store Prop ein verspotter Redux-Speicher ist. (Sie verwenden 'react-addons-test-utils', um ihre Testkomponenten-Rendering zu machen, aber es wäre noch einfacher mit Enzym.)

In Ihrem Fall könnten Sie spioniert auf die verspotteten Laden dispatch() Methode zu gewährleisten dass die Aktions-Dispatcher-Requisiten Ihrer Komponente es wie erwartet aufrufen.