title: Testing async redux with third party API calls
body: <p>I'm new to redux and programming in general and am having trouble wrapping my head around certain unit testing concepts.</p>
  
  <p>I have some async actions in redux, which involve calls to a third party API (from the 'amazon-cognito-identity-js' node module).</p>
  
  <p>I have wrapped the external API call in a promise function, and I call this function from the 'actual' action creator. So for testing I just want to stub the result of <code>externalAWS()</code> function so that I can check that the correct actions are being dispatched.</p>
  
  <p>I'm using redux-thunk for my middleware.</p>
  
  <pre><code>import { AuthenticationDetails,
           CognitoUser
  } from 'amazon-cognito-identity-js';
  
  export function externalAWS(credentials) {
  
    //This is required for the package
    let authenticationDetails = new AuthenticationDetails(credentials);
  
    let cognitoUser = new CognitoUser({
    //Construct the object accordingly
    })
  
    return new Promise ((resolve, reject) =&gt; {
  
      cognitoUser.authenticateUser(authenticationDetails, {
        onSuccess: result =&gt; {
          resolve(result);
        },
        onFailure: error =&gt; {
          reject(error)
        }
      })
    }
  }
  
  export function loginUser(credentials) {
  
    //return function since it's async
    return dispatch =&gt; {
  
      //Kick off async process
      dispatch(requestLogin());
  
      externalAWS(credentials)
        .then((result) =&gt; {
          dispatch(receiveLogin(result.getAccessToken().getJwtToken(), credentials.username))
        })
        .catch((error) =&gt; {
          dispatch(failedLogin(error.message, etc))
        })
    }
  }
  </code></pre>
  
  <p>I don't have any test code yet because I am really not sure how to approach this. All the examples deal with mocking a HTTP request, which I know is
   what this boils down to, so am I supposed to inspect the HTTP requests in my browser and mock them out directly?</p>
  
  <p>It's further complicated by the fact that the second argument of <code>authenticateUser</code> is not even a plain callback, but an object with callbacks as it's values.</p>
  
  <p>Can anyone offer some advice on whether my intention in unit testing the async function is correct, and how I should approach it? Thank you.</p>
  
  <p>Edit: I'm testing in Jest.</p>
  
  <p>Edit2: Request Headers
  <a href="https://i.stack.imgur.com/iDxCR.png" rel="nofollow noreferrer">First POST request</a>, 
  <a href="https://i.stack.imgur.com/0d9XH.png" rel="nofollow noreferrer">Second POST request</a></p>
  
  <p>Edit3: Split the function, trying my best to isolate the external API and create something that is 'easily mock/stub-able'. But still running into issues of how to properly stub this function.</p>