接続されたReduxコンポーネント内のコンポーネントでReduxアクションをユニットテストする方法

Question

jestとenzymeを使用して私のReactアプリケーションをテストし、接続されたコンポーネントのテストに苦労しています。

は、私は、次のロジックが単純なコンポーネント持っています：

class LoginPage extends React.Component { 

    componentDidMount() { 
     if (!this.props.reduxReducer.appBootstrapped) { 
       this.props.dispatch(ReduxActions.fadeOutAndRemoveSplashScreen(500)); 
     } 
    } 

    render() { 
     return (
      <div data-page="login-page" > 
       <div>This is the login page.</div> 
      </div> 
     ); 
    } 
} 

const mapStateToProps = (state) => { 
    return { 
     reduxReducer: state.reduxReducer 
    } 
}; 

export default connect(mapStateToProps, null)(LoginPage); 

だから、これはいくつかのテキストを含む<div />要素を表示するコンポーネントですが、私はテストしたい重要な部分はそのときですコンポーネントがマウントされると、アクションがディスパッチされてスプラッシュ画面が非表示になります。 これは、アプリケーションがブートストラップされていない場合にのみ発生します。

私は、コンポーネントが描画されることをテストするための簡単なユニットテストを持っている：

describe("[LoginPage Component]",() => { 
    it("Renders without a problem.",() => { 
     // Act. 
     const wrapper = mount(
      <LoginPage store={ reduxStore } /> 
     ); 

     // Assert. 
     expect(wrapper.find("div[data-page=\"login-page\"]").length).toBe(1); 
    }); 
}); 

reduxStoreプロパティは、次のコードで作成された私の実際のReduxの店、次のとおりです。今

const reduxStore = createStore(
    combineReducers(
     { 
      reduxReducer 
     } 
    ) 
); 

、 componentDidMount()メソッドをテストするにはどうすればよいですか？さらに特別な場合は、アプリケーションがまだブートストラップされていないときにreduxアクションfadeOutAndRemoveSplashScreen()が呼び出されることをテストします。

私は私のレビュックスストアを模倣する必要があると思うが、私はこれについて初心者であり、今始める方法はないので、その例が高く評価される。

私の実装に関する他の考えがある場合は、お気軽にご相談ください。

種類は、私がアクションをオフに送信するために、生dispatchメソッドを使用していないだろう

Answer 1

について。 mapDispatchToPropsを使用します。これにより、コンポーネントの小道具であなたの行動を直接利用できるようになります。ここでは、connectメソッドの簡略化としてES6分解を使用します。

それでは、reduxストアを嘲笑するのではなく、コンポーネントなしでテストするだけです。 class（最初の行）にエクスポートを追加してみてください。その後

export class LoginPage extends React.Component { 

    componentDidMount() { 
     if (!this.props.reduxReducer.appBootstrapped) { 
      // make sure that you are using this.props.action() not 
      // just the action(), which is not connected to redux 
      this.props.fadeOutAndRemoveSplashScreen(500); 
     } 
    } 

    render() { 
     return (
      <div data-page="login-page" > 
       <div>This is the login page.</div> 
      </div> 
     ); 
    } 
} 

const mapStateToProps = (state) => { 
    return { 
     reduxReducer: state.reduxReducer 
    } 
}; 

export default connect(mapStateToProps, { 
    fadeOutAndRemoveSplashScreen: ReduxActions.fadeOutAndRemoveSplashScreen 
})(LoginPage); 

テストではなく、接続されたコンポーネントをインポートし、クラスをインポートします：たとえば

import ConnectedLoginPage, { LoginPage } from '/path/to/component'; 

その後、単にあなたがテストしたいものは何でも小道具LoginPageを渡します。だから我々は、falseにあなたのappBooststrappedを設定し、sinonスパイとしてアクションを渡します：

const spy = sinon.spy(); 
const reduxReducer = { 
    appBootstrapped: false, // or true 
} 
const wrapper = mount(
    <LoginPage reduxReducer={reduxReducer} fadeOutAndRemoveSplashScreen={spy} /> 
); 

// test that the spy was called 
expect(spy.callCount).to.equal(1); 

これはテストがはるかに簡単になり、そしてより重要なのは、コンポーネントの動作テストしている - ではないReduxのを。