非同期アクションをテストしようとすると `TypeError：store.dispatch（...）。次に関数ではありません '

Question

この例を使用して私の非同期アクションクリエータをテストしようとしています：http://redux.js.org/docs/recipes/WritingTests.html#async-action-creatorsと私はすべて同じでしたが、エラーが発生しました：

async actions › creates FETCH_BALANCE_SUCCEESS when fetching balance has been done 

    TypeError: store.dispatch(...).then is not a function 

私は例からすべてのステップを実行したので、なぜ起こったのか分かりません。

私はこの例も見つけましたが、とにかく間違いがどこかにあり、残念ながら見つけられません。私がテストしようとしています

import nock from 'nock'; 
import configureMockStore from 'redux-mock-store'; 
import thunk from 'redux-thunk'; 
import * as actions from './'; 
import * as types from '../constants'; 

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

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

    it('creates FETCH_BALANCE_SUCCEESS when fetching balance has been done',() => { 
    const store = mockStore({}); 

    const balance = {}; 

    nock('http://localhost:8080') 
     .get('/api/getbalance') 
     .reply(200, { body: { balance } }); 

    const expectedActions = [ 
     { type: types.FETCH_BALANCE_REQUEST }, 
     { type: types.FETCH_BALANCE_SUCCEESS, body: { balance } }, 
    ]; 

    return store.dispatch(actions.fetchBalanceRequest()).then(() => { 
     // return of async actions 
     expect(store.getActions()).toEqual(expectedActions); 
    }); 
    }); 
}); 

私の行動：私は、エラーを持っているなぜ私のテストケースを例と同じ

私のテストケースのように見える場合でも、私のミスはどこです。あなたのテストで

import 'whatwg-fetch'; 
import * as actions from './actions'; 
import * as types from '../constants'; 

export const fetchBalanceRequest =() => ({ 
    type: types.FETCH_BALANCE_REQUEST, 
}); 

export const fetchBalanceSucceess = balance => ({ 
    type: types.FETCH_BALANCE_SUCCEESS, 
    balance, 
}); 

export const fetchBalanceFail = error => ({ 
    type: types.FETCH_BALANCE_FAIL, 
    error, 
}); 


const API_ROOT = 'http://localhost:8080'; 

const callApi = url => 
    fetch(url).then(response => { 
    if (!response.ok) { 
     return Promise.reject(response.statusText); 
    } 
    return response.json(); 
    }); 

export const fetchBalance =() => { 
    return dispatch => { 
    dispatch(actions.fetchBalanceRequest()); 
    return callApi(`${API_ROOT}/api/getbalance`) 
     .then(json => dispatch(actions.fetchBalanceSucceess(json))) 
     .catch(error => 
     dispatch(actions.fetchBalanceFail(error.message || error)) 
    ); 
    }; 
}; 

Answer 1

あなたはあなたがオブジェクトを返すfetchBalanceRequestをテストしようとしている

return store.dispatch(actions.fetchBalanceRequest()).then(() => { ... }) 

を持っているので、あなたはその上.then()を呼び出すことはできません。あなたのテストでは、実際にはfetchBalanceをテストしたいと思うでしょう。これは非同期アクション作成者です（あなたが投稿したreduxドキュメントで説明されています）。