testing async store.dispatch

[kswope]

Maybe I'm overlooking something but I'm finding it impossible to test store.dispatch with an async action without a hacky timer solution. In the below example actions.authenticate contains an ajax call. The ajax call is mocked but its still in an async situation. I'm using redux-thunk middlewear. testTimeout() is just setTimeout with a 0 second delay.

Yes I know the design of redux allows the separate testing of actions, reducers, etc, but testing store.dispatch itself is a lot of bang for the buck because it ties store, reducers, actions and middlewear together.

      test( 'success', (done) => {                                                                                                                  

         fauxJaxResponse( '/authenticate', { 'the': 'token' } )                                                                                      

         store.dispatch( actions.authenticate( 'myname', 'mypass' ) )                                                                                

         testTimeout(()=>{                                                                                                                           
           // store.getState() asserts here                                                                                                                           
           done()                                                                                                                                    
         })                                                                                                                                          

       }) 

I could test actions and reducers together (below) bypassing store.dispatch but its incomplete because its bypassing any middlewear. Note that actions.authenticate() returns a thunk that calls mockDispatch when ready

test( 'success', (done) => {                                                                                                                  


  fauxJaxResponse( '/authenticate', { 'the': 'token' } )                                                                                            

   var mockDispatch = function( action ) {                                                                                                           
     state = reducer(action)                                                                                                                         
     // state asserts here                                                                                                                           
     done()                                                                                                                                          
   }                                                                                                                                                 

   actions.authenticate()( mockDispatch )  

})

I almost want store.dispatch() to take a callback as a second param, to be called when the dispatch is complete, but that's weird right, and only useful in testing?

[taylorhakes]

You can have a callback by using store.subscribe. It is used by react components to get state updates.

var unsubscribe = store.subscribe(function() {
  expect(store.getState()).toEqual(...);
  done();
});

// Some async dispatch
actions.authenticate()( store.dispatch )  ;

You probably want to clean up the subscriber after the test

unsubscribe();

[kswope]

I didn't even come to mind within the context of testing, that's a great solution. I'm assuming it fires after a dispatch and not at some arbitrary time. Thanks!

[gaearon]

I'm reopening so somebody can contribute this to the Writing Tests recipe. Please write here if you make a PR!

[idolize]

Glad I found this issue! Was racking my brain trying to figure out something elegant here. Thanks!

[gaearon]

Rather than this:

var unsubscribe = store.subscribe(function() {
  expect(store.getState()).toEqual(...);
  done();
});

// Some async dispatch
actions.authenticate()( store.dispatch )  ;

you can just write this:

var unsubscribe = store.subscribe(function() {
  expect(store.getState()).toEqual(...);
  done();
});

// Some async dispatch
store.dispatch(actions.authenticate());

as long as your store in tests also has the same middleware applied.

[takashi]

I'm confusing about testing async action dispatch

I'd like to test like below

function postOauthTokenRequest() {
  return {
    type: POST_OAUTH_TOKEN_REQUEST
  };
}

function postOauthTokenSuccess(body) {
  return {
    type: POST_OAUTH_TOKEN_SUCCESS,
    body
  };
}

function postOauthTokenFailure(ex) {
  return {
    type: POST_OAUTH_TOKEN_FAILURE,
    ex
  };
}

export function postOauthToken(data) {
  return dispatch => {
    dispatch(postOauthTokenRequest());
    return fetcher.post('http://localhost:3000/oauth/token', data)
      .then(json => dispatch(postOauthTokenSuccess(json.body)))
      .catch(ex => dispatch(postOauthTokenFailure(ex)));
  };
}

I'd like to test async request postOauthTokenSuccess and postOauthTokenFailure when postOauthToken is called and execute dispatching.

by using the sample test code above written by @gaearon , how can i test it?

because I have to wait dispatching postOauthTokenSuccess after postOauthTokenRequest has dispatching.

[salmanm]

@gaearon I am still not able to understand how do I test async actions and mock ajax response within them and dispatch the newAction. Once I understand, I'll make sure to raise a PR in the real-world example. Could you give some pointers?