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

Posted 2023-02-22

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

【英文标题】：VueJs how to remove global error handler for testing with vue-test-utils

【发布时间】：2020-10-19 09:03:56

【问题描述】：

我正在 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://vuejs.org/v2/api/#errorHandler我如何应用错误消息中的建议？

这里有一个类似的问题：How to disable the "Global error handler detected" warning in 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   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>

【问题讨论】：

你在哪里设置Vue.config.errorHandler？您在哪里尝试停用它？

我没有在任何地方明确设置Vue.config.errorHandler，它只是vue-test-utils.js 的一部分。我尝试使用import Vue from 'vue'; Vue.config.errorHandler = function (err, vm, info) console.log('hi there'); // handle error // `info` is a Vue-specific error info, e.g. which lifecycle hook // the error was found in. Only available in 2.2.0+

在测试文件（上述文件）中未成功停用它

如果我在我的主代码中明确设置警告，然后运行测试，我只能重现警告，所以我假设你的代码必须以某种方式设置它。此外，您的停用代码并没有真正按照您的意图进行，因为它只是设置了一个新的错误处理程序（即使它是无操作的）。要停用它，请将其设置为 null。

嘿，好吧，我真的不知道那可能在哪里......我怎么能找到？搜索errorHandler 不会产生任何结果，除了提到的vue-test-utils.js。另外，我如何将其设置为null？ Vue.config.errorHandler = null; 给了我一个 Typescript 错误：Type 'null' is not assignable to type '(err: Error, vm: Vue, info: string) => void'. 谢谢！

【参考方案1】：

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

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