title: How to unit test promise rejection in React and Jest
body: <p>I am trying to write a unit test for a react component. It's a fairly standard component which calls a promise-returning method and uses 'then' and 'catch' to handle the resolution. My test is trying to validate that it calls the correct method when the promise is rejected however despite following what i believe is a standard patttern, I cannot get jest to validate the call. I have listed the relevant files here and have also put up a github sample, which is linked at the bottom of the question. That sample is simply a new react app created using npx and the files below added in.</p>
  
  <p>Here is my example component:</p>
  
  <pre><code>import React from 'react';
  import api from '../api/ListApi';
  
  class ListComponent extends React.Component {
  
      constructor(props) {
          super(props);
          this.fetchListSuccess = this.fetchListSuccess.bind(this); 
          this.fetchListFailed = this.fetchListFailed.bind(this); 
  
      }
  
      fetchList() {
          api.getList()
          .then(this.fetchListSuccess)
          .catch(this.fetchListFailed);
      }
  
      fetchListSuccess(response) {
          console.log({response});
      };
  
      fetchListFailed(error) {
          console.log({error});
      };
  
      render() {
          return(&lt;div&gt;Some content&lt;/div&gt;);
      };
  }
  
  export default ListComponent;
  </code></pre>
  
  <p>Here is the api class (note, the api doesnt exist if you run the app, its just here for example):</p>
  
  <pre><code>const getList = () =&gt; fetch("http://someApiWhichDoesNotExist/GetList");
  
  export default { getList };
  </code></pre>
  
  <p>And here is the test case:</p>
  
  <pre><code>import ListComponent from './ListComponent';
  import api from '../api//ListApi';
  
  describe('ListComponent &gt; fetchList() &gt; When the call to getList fails', () =&gt; {
      it('Should call fetchListFailed with the error', async () =&gt; {
  
          expect.hasAssertions();
  
          //Arrange
          const error = { message: "some error" };
          const errorResponse = () =&gt; Promise.reject(error);
          const componentInstance = new ListComponent();
  
          api.getList = jest.fn(() =&gt; errorResponse());
          componentInstance.fetchListFailed = jest.fn(() =&gt; { });
  
          //Act
          componentInstance.fetchList();
  
          //Assert
          try {
              await errorResponse;
          } catch (er) {
              expect(componentInstance.fetchListFailed).toHaveBeenCalledWith(error);
          }
  
      });
  });
  </code></pre>
  
  <p>The problem is that the test is not executing the catch block, so, in this case, the expect.hasAssertions() is failing the test. Can anyone help me understand the catch block is not executing? Wrapping the await in the try block and asserting in the catch seems to be a standard pattern in the <a href="https://jestjs.io/docs/en/tutorial-async#error-handling" rel="nofollow noreferrer">docs</a> but I am fairly new to Js and React and am obviously doing something wrong.</p>
  
  <p>Here is the <a href="https://github.com/DavMcnee/JestTesting" rel="nofollow noreferrer">sample project</a> on GitHub. Any help would be greatly appreciated =)</p>