2017-01-27 24 views
4

私は非同期アクションをreduxでテストしようとしていますが、取得できません。私はノックとaxiosを使用していますので、私はaxiosからrespondeデータを受信しようとしていますノックがAxiosで動作しない動作非同期テストで取得する

私の行動をテストするには、Get:

describe('Async Actions',() => { 
    afterEach(() => { 
     nock.cleanAll(); 
    }); 

    it('should load transmissors', (done) => { 
     const localStorage = { 
      token: 'a9sd8f9asdfiasdf' 
     }; 
     nock('https://tenant.contactto.care') 
       .get('/api/clients/1/transmissors/', { 
        reqheaders: { 'Authorization': "Token " + localStorage.token } 
       }) 
       .reply(200, { data: [ 
        { 
         "id": 12, 
         "zone": "013", 
         "client": 1, 
         "description": "pingente", 
         "identifier": "", 
         "general_info": "" 
        }, 
        { 
         "id": 15, 
         "zone": "034", 
         "client": 1, 
         "description": "colar", 
         "identifier": "", 
         "general_info": "" 
        } 
       ]}); 

     axios.get(`/api/clients/1/transmissors/`, { 
      headers: { 'Authorization': "Token " + localStorage.token }, 
     }).then(transmissors => { 
       console.log(transmissors); 
     }).catch(error => { 
      throw(error); 
     }) 
     done(); 
    }); 
}); 

、ここでは私のアクションです:

export function loadTransmissors(clientId){ 
     return function(dispatch){ 
      axios.get(`/api/clients/${clientId}/transmissors/`, { 
       headers: { 'Authorization': "Token " + localStorage.token }, 
      }).then(transmissors => { 
        dispatch(loadTransmissorsSuccess(transmissors.data, clientId)); 
      }).catch(error => { 
       throw(error); 
      }) 
     } 
    } 

しかし、私console.logでこのエラーを受け取る:

UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 3): SyntaxError 

私はダン・アブラモフ監督からこの答えを見つけました: How to unit test async Redux actions to mock ajax response

https://github.com/reactjs/redux/issues/1716

誰もがReduxの-thunk.withExtraArgumentでテストを作成する方法を知っていますか?

ありがとうございます。

applyMiddleware(thunk.withExtraArgument({ axios })) 

ため

applyMiddleware(thunk) 

をだから私は、私を更新:

+0

は、完全なエラーメッセージということですか? – gfullam

+0

このhttps://www.npmjs.com/package/axios-mock-adapterのaxios-mock-adapterをお勧めします – Samo

答えて

0

私はReduxので引数を経由してaxiosを注入する私の問題を解決しましたので、私は私のReduxのが私の店でサンク変更 https://github.com/gaearon/redux-thunk#injecting-a-custom-argument

サンクアクション時の非同期戻り関数 送信元:

return (dispatch) => { 
    ... 
} 

const middleware = [thunk.withExtraArgument({axios})]; 
    const mockStore = configureMockStore(middleware); 

    function asyncActions() { 
     return dispatch => { 
     return Promise.resolve() 
      .then(() => dispatch(transmissorsActions.loadTransmissors(1))) 
     } 
    } 

と私は機能を使用:

Reduxのサンクで注入
const axios = { 
     get: (url,params) => Promise.resolve({data: transmissors}) 
} 

私actions.testで
return (dispatch, getState, { axios }) => { 
    ... 
} 

私は約束してAPIを嘲笑asyncActions:自分の店で私の行動をテストする:

it('should load transmissors', (done) => { 
     const expectedAction = { type: types.LOAD_TRANSMISSORS_SUCCESS, transmissors, clientId}; 

     const store = mockStore({transmissors: [], expectedAction}); 
     store.dispatch(asyncActions()).then(() => { 
      const action = store.getActions(); 
      expect(action[0].type).equal(types.LOAD_TRANSMISSORS_SUCCESS); 
      expect(action[0].transmissors).eql(transmissors); 
      expect(action[0].clientId).equal(1); 
     }); 
     done(); 

    }); 

あなたはReduxの-モック店このサンプルとについての詳細情報を持つことができます。 https://github.com/arnaudbenard/redux-mock-store/blob/master/test/index.js

関連する問題