Komponententest mit Jest für React/Redux Komponente

Question

Ich teste meine verbundene Komponente mit Jest. Dies ist, wie die Komponente aussieht:

import React, {Component, PropTypes} from 'react'; 
import { connect } from 'react-redux'; 

class MyComponent extends Component { 
    constructor(){ 
    super(); 
    this.onButtonClick = this.onButtonClick.bind(this); 
    } 

    onButtonClick(id) { 
    dispatch(actions.onButtonClick(id)); 
    } 

    render() { 
    return (
     <div onClick={this.onButtonClick} /> 
    ) 
    } 
} 

function mapStateToProps(state) { 
    something: state.something 
} 

MyComponent.propTypes = { 
    dispatch: PropTypes.func.isRequired 
} 

export default connect(mapStateToProps)(MyComponent) 

Ich bin nicht sicher, wie Sie testen ‚OnButtonClick‘, da es eine Aktion auslöst. Wie erwarte ich, dass der Versand mit korrekten Parametern unter Verwendung von Jest aufgerufen wurde.

Answer 1

Sie können Ihre Komponente zusätzlich zum Standardexport exportieren. So ändern Sie es zu:

export class MyComponent extends Component 

In Ihrem Test können Sie jetzt Ihre tatsächliche Komponente anstelle der verbundenen Komponente importieren. Wie Sie dispatch als eine Stütze Ihrer Komponente haben, können Sie eine Scheinfunktion oder einen Spion (mit etwas wie Jasmin oder Sinon) für dispatch in Ihrem Test liefern, und Sie können testen, ob das mit den richtigen Parametern aufgerufen wird.

abfragen auf redux Testen hier aus: http://redux.js.org/docs/recipes/WritingTests.html