無法測試Redux中的異步操作

Question

我試圖測試我的一個函數，該函數在redux中爲我的應用程序調度了調用。 測試使用摩卡，phantomjs。我正在使用nock進行http調用。

我的測試是：

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 Async Action Creators教程。

我對前端測試非常陌生。如果有人能幫助我解決這個問題，那將是非常棒的。

預先感謝您的時間和幫助。

Answer 1

只需從it的論點和退回承諾的末尾刪除done。當你測試承諾時，你應該簡單地回覆一個承諾，不要做任何done()回調

Answer 2

你可以簡單地在摩卡測試中返回it塊的承諾。這將允許您避免添加不必要的then和catch塊。

而且它可能是更容易使用redux-actions-assertions

測試異步操作的創造者那麼這將是簡單的：

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) 
    ]) 
})