Estoy tratando de probar mis acciones asíncronas en redux pero no lo consigo.
Estoy usando nock y axios, así que estoy tratando de recibir datos de respuesta de axios para probar mis acciones:
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(); }); });y aquí está mi acción:
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); }) } }Pero recibo este error en console.log:
UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 3): SyntaxErrorEncontré esta respuesta de Dan Abramov: Cómo probar la unidad de acciones asíncronas de Redux para simular la respuesta de ajax
https://github.com/reactjs/redux/issues/1716
¿Alguien sabe cómo hacer una prueba con redux-thunk.withExtraArgument?
Gracias por adelantado.
Resolví mi problema inyectando axios a través de un argumento en redux thunk https://github.com/gaearon/redux-thunk#injecting-a-custom-argument
Así que cambié mi redux thunk en mi tienda:
applyMiddleware(thunk)por
applyMiddleware(thunk.withExtraArgument({ axios }))Así que actualicé mis funciones de devolución asincrónicas en las acciones De:
return (dispatch) => { ... }Para:
return (dispatch, getState, { axios }) => { ... }en mi actions.test me burlé de una API con promesas:
const axios = { get: (url,params) => Promise.resolve({data: transmissors}) }inyectado en redux thunk:
const middleware = [thunk.withExtraArgument({axios})]; const mockStore = configureMockStore(middleware); function asyncActions () { return dispatch => { return Promise.resolve() .then(() => dispatch(transmissorsActions.loadTransmissors(1))) } }y usé la función asyncActions para probar mis acciones en mi tienda:
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(); });Puede obtener más información sobre redux-mock-store con esta muestra: https://github.com/arnaudbenard/redux-mock-store/blob/master/test/index.js