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

Question

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

    showPhotoOnTarget(photoCanvas, targetCanvas) {
      let imgData = photoCanvas
        .getContext("2d")
        .getImageData(0, 0, photoCanvas.width, photoCanvas.height);
      targetCanvas.width = photoCanvas.width;
      targetCanvas.height = photoCanvas.height;
      targetCanvas.getContext("2d").putImageData(imgData, 0, 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 不是很熟悉，这可能是问题的一部分。

标签： unit-testingvue.jsjestjshtml5-canvasvue-test-utils