无法测试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) 
    ]) 
})