How can I test an action after a promise throws an exception? - vue.js

Question

I'm writing some tests with Vue and Jest, I need to test if a toast is open with an error message after a service throws an exception. I wrote the same test for the success case, but I can't achieve the oposite result.
success case
it('shows a success toast after delete', async () => {
jest.spyOn(fontService, 'deleteUser').mockResolvedValueOnce(true);
const wrapper = await createWrapper(); // custom function
wrapper.vm.$toast.open = jest.fn();
wrapper.vm.deleteUser('my_user_id');
await wrapper.vm.$nextTick();
expect(wrapper.vm.$st.toast.open).toBeCalledWith({
type: 'success',
content: 'User was successfully deleted',
});
});
error case (not working)
it('shows an error toast trying to delete', async () => {
jest.spyOn(fontService, 'deleteUser').mockImplementation(() => { throw new Error('error') });
const wrapper = await createWrapper(); // custom function
wrapper.vm.$toast.open = jest.fn();
wrapper.vm.deleteUser('my_user_id');
await wrapper.vm.$nextTick();
expect(wrapper.vm.$st.toast.open).toBeCalledWith({
type: 'error',
content: 'There was an error trying to delete this font. Please try again.',
});
});
deleteUser method
async deleteUser(userId) {
this.setLoading(true);
fontService
.deleteUser(userId)
.then(() => {
this.$toast.open({
type: 'success',
content: 'User was successfully deleted',
});
this.getFonts();
})
.catch(() => {
this.$st.toast.open({
type: 'error',
content: 'There was an error trying to delete this font. Please try again.',
});
})
.finally(() => {
this.setLoading(false);
});
}
jest log
expect(jest.fn()).toBeCalledWith(...expected)
Expected: {"content": "There was an error trying to delete this font. Please try again.", "type": "error"}
Number of calls: 0