Unit test cases for redux async actions with side effects

Question

I was working on a react native application and I have a redux async action which calls my API when the user tries to sign in. On successful sign in I update the redux store as well my AsyncStorage to keep the user logged in even when the application is restarted.

const fetch = (accessTokenInAsyncStore, navigation) => {
  return (dispatch) => {
    axios({
      method: "post",
      url: CHECK_ACCESS_TOKEN,
      headers: {
        Authorization: accessTokenInAsyncStore
      }
    })
      .then(async ({data}) => {
        const {accessToken, accessTokenExpiresIn} = camelizeKeys(data);
        dispatch(update(accessToken));
        await setAccessTokenDetailsInAsyncStore(accessToken, accessTokenExpiresIn);
      })
      .catch(() => {
        removeAccessTokenDetailsFromAsyncStore();
        const routeName = ROUTE_CONSTANTS.LoginStart;
        const params = {
          resetStoreOnLogout: true
        };
       replaceRoute (navigation, routeName, params); 
    });
  };
};


const setAccessTokenDetailsInAsyncStore = async (accessToken, accessTokenExpiresIn) => {
  const accessTokenExpirationTime = Math.floor(Date.now() / 1000) + accessTokenExpiresIn;
  await AsyncStorage.setItem(accessTokenKey, accessToken);
  await AsyncStorage.setItem(accessTokenExpirationTimeKey, JSON.stringify(accessTokenExpirationTime));
};

const removeAccessTokenDetailsFromAsyncStore = () => {
  AsyncStorage.removeItem(accessTokenKey);
  AsyncStorage.removeItem(accessTokenExpirationTimeKey);
};

I was trying to write a unit test case for redux actions and reducers for this scenario using redux-mock-store but I am not able to understand how to write test cases for thunks which have side effects.

Is this the correct approach or do I need to do modify my code a bit?

This might help you https://stackoverflow.com/questions/47541032/handling-async-request-with-react-redux-and-axios/47588228#47588228 — Shubham Khatri, Feb 15 '18 at 06:12
Yeah even I was thinking of keeping it plain but how do I handle the side effects? I need to call few functions based on promise rejection/success — Harkirat Saluja, Feb 15 '18 at 06:16
As far as I understand, `setAccessTokenDetailsInAsyncStore` and `removeAccessTokenDetailsFromAsyncStore` are also actions and hence you can just check if these actions are called — Shubham Khatri, Feb 15 '18 at 06:18
updated the question.. they are not actions but just pure functions — Harkirat Saluja, Feb 15 '18 at 06:21
https://github.com/wix/redux-testkit has an easy way t unit test redux thunks — yedidyak, Feb 15 '18 at 14:57

Unit test cases for redux async actions with side effects

0 Answers0