Async-Aktionen in Redux nicht testen

Question

Ich habe versucht, eine meiner Funktionen zu testen, die für meine Anwendung Dispatch-Aufrufe in Redux haben. Der Test verwendet Mocha, Phantomjs. Ich verwende Nock, um http-Anrufe zu tätigen.

Mein Test ist:

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

Ich versuche, diese Aktion zu testen:

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

erhalte ich folgende Fehlermeldung: Timeout von 2000 ms exceeded.Ensure das getan() zurückrufen wird, in diesem Test aufgerufen.

Ich gehe davon aus, dass dies wegen des Fehlers der Dispatch Call sein könnte. so änderte ich meinen Ruf zu

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

ich diesen Fehler habe: undefiniert ist kein Konstruktor (in der Nähe von '.... catch (fertig); ...')

Ich bin nicht sicher, was falsch Ich mache. Ich beziehe mich auf http://redux.js.org/docs/recipes/WritingTests.html Async Action Creators Tutorial.

Ich bin sehr neu im Front-End-Test. Es wäre toll, wenn mir jemand dabei helfen könnte.

Vielen Dank im Voraus für Ihre Zeit und Hilfe.

Answer 1

einfach die done sowohl von it ‚Argumente und vom Ende der zurück Versprechen entfernen. Wenn Sie Versprechungen testen, sollten Sie einfach ein Versprechen zurückgeben und tun Sie keine done() Rückruf

Answer 2

Sie können einfach ein Versprechen aus it Block in Mokka-Tests zurückgeben. Dadurch vermeiden Sie, unnötige then und catch Blöcke hinzuzufügen.

Auch könnte es viel einfacher sein ASync Aktion Schöpfer zu testen mit redux-actions-assertions

Dann wird es einfach:

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

Oder auch:

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