title: How to test a component that does not handle a rejected promise with `wait` from the react-testing-library?
body: <p>Typical online shopping store. I am trying to test a scenario where an AJAX request fails when the user tries to place an order. 
  The user can also opt-in for a subscription service but the request for this subscription should only happen if the order placement was successful.</p>
  
  <p>To test this failing scenario I use a Promise rejection but the uncaught error bubbles up and causes the test to fail.</p>
  
  <p>Does anyone have an idea how I can test this, preferably without adding a <code>catch</code> to the chaining in the <code>onSubmit</code> method of the <code>Confirmation</code> component? Does <strong>Jest</strong> or <code>wait</code> from <strong>react-testing-library</strong> provide alternatives methods to test this scenario?</p>
  
  <p>I understand that Jest provides <a href="https://jestjs.io/docs/en/tutorial-async#rejects" rel="nofollow noreferrer">.rejects</a> but I am not able to figure out how I should restructure my test to make it work with <code>wait</code>.</p>
  
  <p>The Component:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class Confirmation extends React.Component {
    onSubmit() {
      const { createOrder, items, subscribeUser, userId } = this.props;
      createOrder({ items })
        .then(() =&gt; subscribeUser(userId));
        // no catch here because I use an error boundary component 
        // at the the top level of the App's component tree 
        // to catch and log all errors to a logging service
    }
    
    render() {
      return (
        &lt;div&gt;
          &lt;input 
            type="submit" 
            onClick={this.onSubmit} 
            value="Confirm Order"
          /&gt;
        &lt;/div&gt;
      )
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>The Test:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react'
  import {
    render,
    fireEvent,
    wait
  } from 'react-testing-library'
  
  import Confirmation from './Confirmation'
  
  describe('Confirmation', () =&gt; {
  
    it("should not subscribe when the user's order creation fails", () =&gt; {
      const props = {
        userId: 12345,
        items: [{
          id: 121,
          qty: 1
        }, {
          id: 122,
          qty: 2
        }],
        createOrder: jest.fn(() =&gt; Promise.reject("Order creation failure")),
        subscribeUser: jest.fn(() =&gt; {})
      };
  
      const {
        container
      } = render( 
        &lt;Confirmation { ...props } /&gt;
      );
  
      fireEvent.click(container.querySelector("#confirm-order"));
  
      return wait(() =&gt; {
        expect(props.createOrder).toHaveBeenCalledWith({
          items: props.items
        });
        expect(props.subscribeUser).not.toHaveBeenCalled();
      });
    });
  
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p><em>Please note that the snippets above are not executable - in reality, the component is a bit more complex than the example above but I have tried to simplify it as much as possible without misrepresenting the problem.</em></p>
  
  <p><strong>Edit</strong></p>
  
  <p>Wrapping <code>&lt;Confirmation/&gt;</code> in another component with an error boundary does not seem to be working either. The error still bubbles up the component tree to fail the test:</p>
  
  <p><a href="https://i.stack.imgur.com/8AxjL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8AxjL.png" alt="Jest failure"></a></p>