Jest for React/Reduxコンポーネントのユニットテスト

Question

Jestを使用して接続コンポーネントをテストしています。 これは、コンポーネントがどのように見えるかです：

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) 

私がテストする方法を確認していない「onButtonClick」はアクションをディスパッチするので。 jestを使用して正しいパラメータでディスパッチが呼び出されることを期待する方法。

Answer 1

できることは、デフォルトの書き出しに加えてコンポーネントを書き出すことです。したがって、次のように変更してください。

export class MyComponent extends Component 

テストでは、接続されたコンポーネントではなく実際のコンポーネントをインポートできるようになりました。あなたのコンポーネントの小道具としてdispatchを持っているので、あなたのテストでdispatchのモック関数またはスパイ（ジャスミンまたはサイロンのようなものを使用）を供給することができ、正しいパラメータで呼び出されるかどうかをテストできます。

ここでreduxテストの詳細を確認してください： http://redux.js.org/docs/recipes/WritingTests.html