jest redux-thunk test同じモジュールのアクションがディスパッチされた場合

Question

同じファイルで定義された別のアクションをディスパッチするreduxアクションクリエータのテストを作成しようとしています。それは説明するのは難しいので、ここでは例です：

// actions/timer.js 

export const onClickButton =() => { 
    return dispatch => { 
    // ... do something 
    dispatch(someAction); 
    dispatch(onTimerStart()); // This is the action creator stated below 
    }; 
}; 

export const onTimerStart =() => { 
    return dispatch => { 
    // ... do something 
    dispatch(someAction); 
    }; 
}; 

私は冗談を使用していると私はonClickButtonを呼び出すときonTimerStartアクションがディスパッチされていることを確認します。

（これらのアクションの作成者はいくつかの引数を取り、それらに基づいて、onTimerStartがすべきか派遣すべきではない、私の実際のコードでは）私は、私はそれを呼び出しているかどうかをテストたりすることはできませんonTimerStartを模擬する方法を見つけ出すように見えることはできません。

Answer 1

1. jest.fn()を使用してディスパッチ用のモックを作成できます。

2. アクションクリエイターを一度呼び出すと、「サンク」（引数としてディスパッチする関数が返されます）が取得されます。

3. これで、返された関数を引数として擬似ディスパッチで呼び出すことができます。

4. dispatch.mock.callsを使用してディスパッチするコールを確認できます。

（1）モック機能

const dispatch = jest.fn(); 

（2）（3）サンクを取得し、

const thunk = onClickButton(); 
thunk(dispatch); 

（4）への呼び出しを確認し、それを呼び出します発送

// indices mean: [the second call] [the first argument of that call] 
dispatch.mock.calls[1][0] 

Answer 2

onTimerStart（）を偽装する代わりに、 "redux-mock-store"を使用して、予想されるアクションがディスパッチされたことをアサートすることができます。

ここにおおよその例があります。この例を使用して

import configureMockStore from 'redux-mock-store'; 
import thunk from 'redux-thunk'; 
import * as timerActions from './actions/timerActions'; 
import * as types from './constants/actionTypes'; 
import { InitialAppState } from './reducers/initialState'; 

const createMockStore = configureMockStore([thunk]); 

describe('timerActions',() => { 

    it('successful call should dispatch someAction',() => { 

     // Arrange. 
     const expectedActions = [ 
      { type: types.someAction}, 
     ]; 

     const store = createMockStore(InitialAppState); 

     // Act. 
     store.dispatch(actions.onClickButton()); 

     // Assert. 
     const dispatchedActions = store.getActions(); 
     expect(dispatchedActions).toEqual(expectedActions); 
    }); 

}); 

、あなたはちょうどあなたが言及している引数に追加する必要があり、正しい場所からあなたactionCreators、actionTypesと初期状態をインポートします。

この例はtypescriptで書かれています。