reactjs/reduxアプリケーションでアクションをディスパッチするコンポーネントを単体テストする方法はありますか？

Question

私は、メソッドdoSomethingの持っているreactjsコンポーネントがあります。

doSomething() 
{ 
    this.setState({ 
     checked: !this.state.checked 
    }, function() { 
     if (this.state.checked) { 
      store.dispatch({type: 'SOMEACTION', data: true}); 
     } 
    }); 
} 

何この方法/コンポーネントのように見えるunittestのチャイ/モカでしょうか？発送はどのようにテストできますか？

Answer 1

ディスパッチをスパイに置き換え、正しい引数で呼び出されたことを確認します。

redux-mock-storeを使用して、別の単体テストで適切にレピュッサに適切なアクションが送信されたかどうかをテストできます。

redux-mock-storeを使用して店舗を模擬することもできます。

なぜ店舗で直接発送していますか？通常は、this.props.dispatch()のように小道具で呼び出すだけです。mapStateToPropsを使用するとディスパッチが自動的に渡されるためです。これは、代わりにスパイを小銭として渡して店全体を模倣する必要がないことを意味します。

Answer 2

expectを使用できます。たとえば、spyを使用してメソッドが呼び出され、状態が変更されたことを確認することができます。

// spy on the method to assert that it has been called 
const doSomething = expect.spyOn(ExampleComponent, 'doSomething'); 
// simulate some behaviour 
... 
// assert method called 
expect(doSomething).totHaveBeenCalled(); 
// assert state changed 
assert.equal(store.getState()..., ...) 

また、これを複数のテストに分割することもできます。