2016-04-14 10 views
0

私のアプリケーションのディスパッチコールをreduxで実行している関数をテストしようとしました。 テストはmocha、phantomjsを使用しています。私はhttpを呼び出すためにノックを使用しています。Reduxで非同期アクションをテストできません

私のテストは次のとおりです。

import React from 'react/addons'; 
import thunk from 'redux-thunk' 
import nock from 'nock' 
import expect from 'expect' 
import configureMockStore from 'redux-mock-store' 
import {RECEIVE_DATA1,RECEIVE_DATA2,RECEIVE_DATA3,fetchAllData} from '../../src/actions/allActions' 


const middlewares = [ thunk ]; 
const mockStore = configureMockStore(middlewares); 


    describe('async actions',() => { 
    afterEach(() => { 
     nock.cleanAll() 
    }) 

    it('creates fetchAllDataAction call', (done) => { 
     const requesting = false; 
     nock('http://localhost:7788/') 
     .get('/data/Data1') 
     .reply(200,{ objects: { name: 'Test1'} }) 
     .get('/Data2') 
     .reply(200,{ objects: { name: 'Test2'} }) 
     .get('/Data3') 
     .reply(200,{ objects: { name: 'Test3'} }); 

     const expectedActions = [ 
     { type: RECEIVE_DATA1 , objects: { name: 'Test1'}}, 
     { type: RECEIVE_DATA2 , objects: { name: 'Test2'}}, 
     { type: RECEIVE_DATA3 , objects: { name: 'Test3'} }, 
     { type: REQUEST_DATA3 , requesting}, 
     ] 

     const store_mock = mockStore({},expectedActions,done) 
     return store_mock.dispatch(fetchAllData()) 
     .then(() => { 
      const actions = store.getActions() 
      expect(actions).toEqual(expectedActions) 
      done() 
     }) 
    }) 
    }) 

私はこのアクションをテストしようとしています:

export function fetchAllData(){ 
    return dispatch => { 
    return $.getJSON(`${SERVER_ROOT}/data/Data1`) 
    .then(json => { 
    dispatch(receiveData1(json)); 
    $.getJSON(`${SERVER_ROOT}/Data2`) 
     .then(json => { 
     dispatch(receiveData2(json)); 
     $.getJSON(`${SERVER_ROOT}/Data3`) 
      .then(json => { 
      dispatch(receiveData3(json)); 
      dispatch(requestData3(false)); 
      }); 
     }); 
    }); 
} 
} 

function receiveData1(data){ 
return { type: RECEIVE_DATA1, 
      data: data 
     } 
} 

function receiveData2(data){ 
return { type: RECEIVE_DATA2, 
      data 
     } 
} 

function receiveData3(data){ 
return { type: RECEIVE_DATA3, 
      data 
     } 
} 

function requestData3(state){ 
return { type: REQUEST_DATA3, 
      state 
     } 
} 

は、私は次のエラーを取得:2000ミリ秒の タイムアウトが(行わをexceeded.Ensure)されるコールバックこのテストで呼び出されます。

私はこれがディスパッチコールの失敗の可能性があると仮定しています。 は、だから、私はこのエラーまし

store_mock.dispatch(fetchAllData()) 
     .then(() => { // return of async actions 
      expect(store_mock.getActions()).toEqual(expectedActions) 
     }) 
     .then(done) 
     .catch(done) 

に私の呼び出しを変更:未定義のコンストラクタではありません(近く「....キャッチ(行われる); ...」)

私が何かわかりません私は間違っています。私はhttp://redux.js.org/docs/recipes/WritingTests.html非同期アクションクリエイターのチュートリアルを参照しています。

私は非常にフロントエンドのテストに新しいです。誰かが私にこれを助けることができれば素晴らしいでしょう。

お時間をいただきありがとうございました。

答えて

0

itの引数と返された約束の両方からdoneを取り除くだけです。約束をテストするときには、約束を返すだけで、何もしないでくださいdone()コールバック

0

モカテストでは、約束をitブロックから返すことができます。これにより、不要なthenブロックとcatchブロックの追加を避けることができます。

it('creates fetchAllDataAction call',() => { 
    const requesting = false; 
    nock('http://localhost:7788/') 
    .get('/data/Data1') 
    .reply(200,{ objects: { name: 'Test1'} }) 
    .get('/Data2') 
    .reply(200,{ objects: { name: 'Test2'} }) 
    .get('/Data3') 
    .reply(200,{ objects: { name: 'Test3'} }); 

    const expectedActions = [ 
    { type: RECEIVE_DATA1 , objects: { name: 'Test1'}}, 
    { type: RECEIVE_DATA2 , objects: { name: 'Test2'}}, 
    { type: RECEIVE_DATA3 , objects: { name: 'Test3'} }, 
    { type: REQUEST_DATA3 , requesting}, 
    ] 

    return expect(fetchAllData()).toDispatchActions(expectedActions) 
}) 

あるいは:

it('creates fetchAllDataAction call',() => { 
    const requesting = false; 
    const response1 = { objects: { name: 'Test1'}}; 
    const response2 = { objects: { name: 'Test2'}}; 
    const response3 = { objects: { name: 'Test3'}}; 

    nock('http://localhost:7788/') 
    .get('/data/Data1') 
    .reply(200, response1) 
    .get('/Data2') 
    .reply(200, response2) 
    .get('/Data3') 
    .reply(200, response3); 

    return expect(fetchAllData()).toDispatchActions([ 
    receiveData1(response1), 
    receiveData2(response2), 
    receiveData3(response3), 
    requestData3(requesting) 
    ]) 
}) 

また、それは簡単になりますredux-actions-assertions

で非同期アクションのクリエイターをテストするためにはるかに簡単であるかもしれません

関連する問題