promise-error-repro.tsx

import * as React from "react";
import "@testing-library/jest-dom"

import { render, waitFor } from "@testing-library/react"
import userEvent from "@testing-library/user-event";

type Props = {reticulate: () => Promise<number>;}
function SplineReticulator({reticulate}: Props) {
  const openWindow = async () => {
    return new Promise<Window>((res) => {
      setTimeout(() => res(window.open('https://www.example.com')!), 250)
    })
  }

  const handler = () => {
    const promise = new Promise(async (res, rej) => {
      try {
        const result = reticulate();
        // Uncommenting this line makes the tests pass.
        // result.catch(() => {});

        await openWindow();
        await result;
        return 3;
      } catch (e) {
        return rej(e);
      }
    });

    promise.then(
      (result) => { console.log('good!', result) }, 
      (reason) => { console.error('bad!', reason.message) }
    );
  }

  return (
    <button onClick={() => handler()}>Click me!</button>
  )
}

it('reticulates splines', async () => {
  window.open = jest.fn().mockReturnValue({ close: jest.fn(), closed: false });
  const reticulate = jest.fn().mockRejectedValue(new Error('oops!'));

  const {getByText} = render(<SplineReticulator reticulate={reticulate} />);
  
  expect(getByText('Click me!')).toBeInTheDocument();
  userEvent.click(getByText("Click me!"));
  await waitFor(() => expect(window.open).toHaveBeenCalled());
})