My React-Component looks like this (simplified a lot):
const prepareStuff = (
{/* some parameters */}
): void => {
doOtherStuff(
{/* some parameters */}
);
};
const doOtherStuff = (
{/* some parementers */}
): void => {
calculate(file, context)
.then((data) => {
// ...
})
.catch((error: Error) => {
console.error(error.message);
// here my snackbar/taost notifications are triggered
});
};
export const MyComponent = () => {
useEffect(() => {
prepareStuff(
{/* needed parameters */}
);
});
}
We want to test or simulate that the calculate method throws an error. So the goal is that an error is thrown when the calculate method gets called and catched after. This is required so that I can then test whether my error notifications (snackbars/toasts) are displayed in the browser.
I can't find a way to spy or stub this method. We're using Cypress component testing currently. Is this even possible whit that?
The test currently looks like this:
beforeEach(() => {
mount(
<MyComponent />
);
});
it('displays notification if calculate method throws an error.', () => {
cy.get('.error-notification').should('exist');
});