VueJs 如何删除全局错误处理程序以使用 vue-test-utils 进行测试

Question

我正在 vue 中对画布运行单元测试（测试正在通过）。但是我收到错误

 console.error node_modules/@vue/test-utils/dist/vue-test-utils.js:1735 [vue-test-utils]: Global error handler detected (Vue.config.errorHandler).  Vue Test Utils sets a custom error handler to throw errors thrown by instances. If you want this behavior in your tests, you must remove the global error handler.

我尝试停用错误处理程序，但这似乎不受支持？ https://v2.vuejs.org/v2/api/#errorHandler 如何应用错误消息中的建议？

这里有一个类似的问题：如何在 vue test utils 中禁用“检测到全局错误处理程序”警告，但没有有用的答案。

我的测试是使用 jest 和 Fabric（用于画布）编写的：

import FabricCanvas from './FabricCanvas';
import { fabric } from 'fabric';
import { shallowMount  } from '@vue/test-utils';

import PolygonDrawing from "@/components/labeling/editor/drawing/PolygonDrawing";

function getFabricCanvas(): fabric.Canvas {
  const wrapper = shallowMount (FabricCanvas);
  const canvas = wrapper.get('#main-canvas').html();
  return new fabric.Canvas(canvas, {
      width: 1024,
      height: 1024,
  } as any);
}

let fCanvas: fabric.Canvas | undefined;

beforeAll(() => {
  fCanvas = getFabricCanvas();
})

  test('add a Polygon to the canvas startDrawingPolygon and stopDrawingPolygon', () => {
    const polygonDrawing = new PolygonDrawing();
    if (fCanvas) {
      expect(fCanvas._objects.length).toStrictEqual(0);
    }
    const objectClass = 'Vehicle';
    const shapeType = 'polygon';
    let startMousePoint = {x: 200, y: 200};
    polygonDrawing.startDrawingPolygon(fCanvas, startMousePoint, objectClass, shapeType);
    startMousePoint = {x: 300, y: 300};
    polygonDrawing.startDrawingPolygon(fCanvas, startMousePoint, objectClass, shapeType);
    startMousePoint = {x: 200, y: 300};
    polygonDrawing.startDrawingPolygon(fCanvas, startMousePoint, objectClass, shapeType);
    
    if (fCanvas) {
      polygonDrawing.stopDrawingPolygon(fCanvas, shapeType, objectClass);
      expect(fCanvas._objects.length).toStrictEqual(1);
    }
  })
});

使用文件 FabricCanvas.vue 模拟画布：

<template>
    <div id="canvas-container">
        <canvas width="1024" height="1024" id="main-canvas"></canvas>
    </div>
</template>

<script lang="ts">
    import {Component, Vue} from 'vue-property-decorator';

    @Component
    export default class FabricCanvas extends Vue {
    }
</script>

<style scoped> </style>

Answer 1

感谢 @tony19 的提示，我找到了解决方案：我的 router/index.js 中有一个来自 Elastic 的名为 APM（应用程序性能监控）的插件：

import { ApmVuePlugin } from '@elastic/apm-rum-vue';

这负责重复的全局错误处理程序，在测试期间停用它解决了错误消息。

Answer 2

在我的项目中，我将

vue2

与

@vitejs/plugin-vue2

和

vitest

一起使用。我有类似的错误。我通过删除

vitest.config.js

中的“线程”选项来修复它

// vitest.config.js
{
  ...
  threads: true,
  ...
}