Rethrowing an error causes vue warning in jest test-CodePudding

I've got a vue application which exists of a page component and a nested child component, which makes a async post-request. If the request is failing, an error is thrown, which is propagated to the top component (Page.vue). This top component handles all errors of its child with the errorCaptured-Lifecycle hook. Here is an working example on stackblitz

The mechanism is working fine and no warning is displayed for my app. However, I want to test my child component isolated with jest and vue-test-utils. Therefore, I made a test:

import { mount } from "@vue/test-utils";
import Child from "./Child";

jest.mock("./api", () => ({
  createSomething: jest.fn(),
}));

it("creation is erroneous", async () => {
  const wrapper = mount(Child);

  createSomething.mockImplementation(() => {
    throw new Error("error");
  });

  let createAction = wrapper.find("[data-test-create]");
  await createAction.trigger("click");
});

However, because the error is rethrown and never catched by the parent component, there is always a console log statement in my test output:

  console.warn
    [Vue warn]: Unhandled error during execution of native event handler 
      at <Child ref="VTU_COMPONENT" > 
      at <VTUROOT>

How can i solve this? I tried to wrap await createAction.trigger("click"); with try/catch but its not working. Do I need to mock the errorCaptured lifecycle of my parent?

CodePudding user response：

One solution is to set a no-op app.config.errorHandler via the global.config mounting option:

const wrapper = mount(Child, {
  global: {
    config: {
      errorHandler(err) { /* ignore */ },
    },
  },
})

demo