Unhandled error gets swallowed by async event handler in test with react and mocha.js - reactjs

Question

I have a curious behaviour in my tests when trying to test an async event handler that awaits a promise. I am using Mocha for my test in combination with global-jsdom, #testing-library/react and #testing-library/user-event to render my component and click a button.
If I now have an error inside the awaited function, this error gets swallowed somewhere and Mocha exits with a passed test.
I build a minimal example to show what I mean:
AsyncFail.js:
import React from 'react';
const AsyncFail = () => {
const asyncHandleClick = async () => {
console.log('test')
await callAsync; //not defined, should throw error
}
return <div onClick={asyncHandleClick} data-testid='button'></div>
};
export default AsyncFail;
import React from 'react';
import { render, screen } from '#testing-library/react';
import userEvent from '#testing-library/user-event';
import AsyncFail from 'asyncFailTest';
describe('asyncFail', () => {
let user;
beforeEach( () => {
user = userEvent.setup();
});
afterEach( () => {
})
context('test async failure', () => {
it('should throw ReferenceError', async () => {
render(
<AsyncFail/>
);
await user.click(screen.getByTestId('button'));
});
});
});
The button click only logs 'test' to the console
I was expecting the error in the best case to cause the test to fail. But I would already be happy if the error would be logged to console.error(), because than I could at least as a workaround spy on this call to check for errors.
I am aware that I should wrap the call with a try/catch-block, but I also want to cover the case if that is forgotten by chance.
I know that an error gets thrown because I can attach a listener to process for that:
In test file:
function onUncaught(err){
console.error(err);
}
beforeEach(() => {
process.on('unhandledRejection', onUncaught);
user = userEvent.setup();
});
This logs:
ReferenceError: callAsync is not defined
What is happening here? Am I doing something wrong?