如何在Vue.js测试中测试Canvas元素？

问题描述

我有一些这样的vue组件方法：

    showPhotoOnTarget(photoCanvas,targetCanvas) {
      let imgData = photoCanvas
        .getContext("2d")
        .getimageData(0,photoCanvas.width,photoCanvas.height);
      targetCanvas.width = photoCanvas.width;
      targetCanvas.height = photoCanvas.height;
      targetCanvas.getContext("2d").putimageData(imgData,0);
    }

在测试设置中，我尝试模拟Canvas这样的东西：

    store = new Vuex.Store({
      state: {
        currentPhotoCanvas: {
          getContext: () => ({
            getimageData: jest.fn(),putimageData: jest.fn()
          })
        }
      },getters: {
        "snap/getCurrentPhotoCanvas": state => state.currentPhotoCanvas
      }

showPhotoOnTarget在挂接钩上被调用，如下所示：

    const photoCanvasRef = this.$refs.photoTargetCanvas;
    this.showPhotoOnTarget(this.photoCanvas,photoCanvasRef);

和$refs在这样的安装选项中被模拟：

const $refs = {
    photoTargetCanvas: {}
  };

但是，当我运行测试时，出现以下错误： TypeError: Failed to execute 'putimageData' on 'CanvasRenderingContext2D': parameter 1 is not of type 'ImageData'.

是否可以在vue测试中模拟这样的Canvas函数？如果是这样，有人可以告诉我如何进行测试设置吗？我对Canvas不太熟悉，这可能是问题的一部分。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）