恢复错误会导致Jest测试中的VUE警告

Question

我有一个vue应用程序，该应用程序存在于页面组件和一个嵌套的子组件，这是异步后重新要求的。如果请求失败，则会丢弃错误，该错误将传播到顶部组件（page.vue）。此顶部组件使用errorcaptrud -lifecycle钩子处理孩子的所有错误。 的示例

这是 stackblitz 机制工作正常 而且我的应用程序没有显示任何警告。但是，我想用开玩笑和vue-test-utils测试我的孩子成分。因此，我进行了一个测试：

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");
});

但是，因为错误是重新返回的，并且从未被父级捕获，所以我的测试输出中总是有一个控制台日志语句：

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

我该如何解决？我尝试将包装等待createAction.trigger（“ click”）; try/catch ，但它不起作用。我需要嘲笑父母的错误限制生命周期吗？

Answer 1

一种解决方案是设置一个no-op app.config.config.config.errorhandler < /code>通过 global.global.config 安装选项：

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

演示