2017-07-05 10 views
0

私はreact/reduxを使用して各リスト項目のデータを表示するパネルのリストを生成しています。 refreshAppList(this.props.list)アクション作成者を呼び出す5秒の間隔を設定し、forEachはリスト内のすべての項目をループし、リフレッシュされたリスト項目を(replyx-thunkを使用して)ディスパッチする非同期呼び出しを行います。基本的に、5秒ごとに最新のデータでパネルの一覧を更新しています。これは素晴らしい作品です!残念ながら、私はこの特定の非同期アクションクリエータのユニットテストを書いているので、私は問題に遭遇しました。 .forEachは何も返さないので、単体テストで呼び出すと定義されません。誰もこの問題を無効にする方法を知っていますか、多分パネルのリスト全体をリフレッシュするために別の方法を使用する必要がありますか?.for非同期アクション作成者がユニットテストを実行しているときにアクションを返さない

ここでは、配列をループし、各配列項目で非同期呼び出しを行うアクション作成者を示します。ここで

export const refreshAppList = list => (dispatch) => { 
    list.forEach((version, index) => { 
    const url = `apiEndpoint/${version.data.app_id}/${version.data.version}`; 
    return axios.get(url) 
     .then(({ data }) => { 
     data.uniqueId = version.uniqueId; 
     data.refreshId = uuidv1(); 
     dispatch({ type: REFRESH_APP_LIST, payload: { index, data } }); 
     }) 
     .catch((e) => { 
     console.log(e); 
     }); 
    }); 
}; 

私が受けていますエラーです:

return store.dispatch(refreshAppList(list)).then(() => { 
    expect(store.getActions()).to.deep.equal(expectedActions); 
}); 

:私は(Reduxの-モックストアを使用して)テスト内のアクションの作成者を呼び出していますどこ

1) async actions creates an action with type: REFRESH_APP_LIST: 
TypeError: Cannot read property 'then' of undefined 
    at Context.<anonymous> (tests/asyncActions.js:140:12) 

をここでは私は、アクション作成者の中で非同期呼び出しから返されたデータを模倣するためにaxios-mock-adapterを使用していることにも言及する価値があると思います。

最後に1つ:同じアプリ内で他の2人の非同期アクションクリエータの単体テストを書いて、両方とも合格しました。大きな違いは、この特定のアクション作成者がforEachループ(テストに何も返さない)を使用して複数の非同期呼び出しを連鎖させていることです。

答えて

0

refreshAppListが返す機能は何も返されないので、動作しません。また、内部からaxios.get.を返しても、.forEachは何も返しません。代わりに.mapを使用して、Promise.allの中のすべてを返すことができます。このようなもの

export const refreshAppList = list => (dispatch) => { 
    return Promise.all(list.map((version, index) => { 
    const url = `apiEndpoint/${version.data.app_id}/${version.data.version}`; 
    return axios.get(url) 
     .then(({ data }) => { 
     data.uniqueId = version.uniqueId; 
     data.refreshId = uuidv1(); 
     dispatch({ type: REFRESH_APP_LIST, payload: { index, data } }); 
     }) 
     .catch((e) => { 
     console.log(e); 
     }); 
    })); 
}; 
+0

ありがとうございました@DonovanM。それはうまくいった! :D – bigneek

+0

恐ろしい!私は、 'refreshAppList'が返す*関数*が何も返さないと言っていたはずです(oops)ことを知りました。あなたがうまく働いてうれしい。 :) – DonovanM

関連する問題