title: How do I test `image.onload` using jest in the context of redux actions (or other callbacks assigned in the action)
body: <p>My problem was that I am trying to make a unit test for a function but can't figure out how to test a part of it.</p>
  
  <p>This is a react / redux action that does the following:</p>
  
  <p>1) retrieves json data with an image url</p>
  
  <p>2) loads the image into an Image instance and dispatches its size to the reducer (asynchronously when image is loaded using Image.onload)</p>
  
  <p>3) dispatches that the fetch was completed to the reducer</p>
  
  <p>The image onload happens asynchronously, so when I try to unit test it it wouldn't be called. Moreover, I can't just mock things out because the image instance is created within the function...</p>
  
  <p>Here's the code I wanted to test (removing some checks, branching logic, and stuff):</p>
  
  <pre><code>export function fetchInsuranceCardPhoto() {
      return dispatch =&gt; {
          dispatch(requestingInsuranceCardPhoto());
          return fetch(`${api}`,
              {
                  headers: {},
                  credentials: 'same-origin',
                  method: 'GET',
              })
              .then(response =&gt; {
                  switch (response.status) {
                      case 200:
                          return response.json()
                              .then(json =&gt; {
                                  dispatch(receivedInsuranceCardPhoto(json));
                              })
                  }
              });
      };
  }
  
  function receivedInsuranceCardPhoto(json) {
      return dispatch =&gt; {
          const insuranceCardFrontImg = json.insuranceCardData.url_front;
          const insuranceCardBackImg = json.insuranceCardData.url_back;
  
          if (insuranceCardFrontImg) {
              dispatch(storeImageSize(insuranceCardFrontImg, 'insuranceCardFront'));
          }
  
          return dispatch(receivedInsuranceCardPhotoSuccess(json));
      };
  }
  
  function receivedInsuranceCardPhotoSuccess(json) {
      const insuranceCardFrontImg = json.insuranceCardData.url_front;
      const insuranceCardBackImg = json.insuranceCardData.url_back;
      const insuranceCardId = json.insuranceCardData.id;
  
      return {
          type: RECEIVED_INSURANCE_CARD_PHOTO,
          insuranceCardFrontImg,
          insuranceCardBackImg,
          insuranceCardId,
      };
  }
  
  function storeImageSize(imgSrc, side) {
      return dispatch =&gt; {
          const img = new Image();
          img.src = imgSrc;
          img.onload = () =&gt; {
              return dispatch({
                  type: STORE_CARD_IMAGE_SIZE,
                  side,
                  width: img.naturalWidth,
                  height: img.naturalHeight,
              });
          };
      };
  }
  </code></pre>
  
  <p>Notice in that last <code>storeImageSize</code> private function how there's an instance of Image created and an image.onload that is assigned to a function.</p>
  
  <p>Now here's my test:</p>
  
  <pre><code>it('triggers RECEIVED_INSURANCE_CARD_PHOTO when 200 returned without data', async () =&gt; {
          givenAPICallSucceedsWithData();
  
          await store.dispatch(fetchInsuranceCardPhoto());
  
          expectActionsToHaveBeenTriggered(
              REQUESTING_INSURANCE_CARD_PHOTO,
              RECEIVED_INSURANCE_CARD_PHOTO,
              STORE_CARD_IMAGE_SIZE,
          );
      });
  </code></pre>
  
  <p>This test though will fail because the test finishes before the <code>image.onload</code> callback is called. </p>
  
  <p><em>How can I force the <code>image.onload</code> callback to be called so that I can test that the `STORE_CARD_IMAGE_SIZE action gets broadcasted?</em></p>