jest 测试中重新抛出错误导致 vue 警告

Question

我有一个 vue 应用程序，它包含一个页面组件和一个嵌套的 child 组件，这使得异步 post-request。如果请求失败，则会抛出一个错误，该错误会传播到顶级组件 (Page.vue)。此顶级组件使用 errorCaptured-Lifecycle 挂钩处理其 child 的所有错误。这是 stackblitz

上的一个工作示例

该机制运行良好，我的应用程序没有显示任何警告。但是，我想 测试我的 child 组件隔离 开玩笑和 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");
});

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

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

我该如何解决这个问题？我试图用 try/catch 包装 await createAction.trigger("click"); 但它不起作用。我需要模拟 parent 的 errorCaptured 生命周期吗？

Answer 1

一种解决方案是设置 no-op app.config.errorHandler via the global.config 安装选项：

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

demo

jest 测试中重新抛出错误导致 vue 警告

Rethrowing an error causes vue warning in jest test

vue.js

jestjs

vue-test-utils