canvas.getContext('2d')をjestする

概要

canvas.getContext('2d')が使われているファイルをjestする方法を下記に記載します。

下記のようなコードをjest実行時に動かせるようにします。

this.canvas = document.getElementById('gray-scot-model-canvas') as HTMLCanvasElement
const ctx = this.canvas.getContext('2d')

環境

@vue/cli 4.5.9

リポジトリ

github.com

canvasMock.jsの作成

jestを走らせる時に使うcanvas関連のmockを作ります。

今回は、getContextをmock化します。

class ContextMock{
  fillStyle

  fillRect(x, y, cellWidth, cellHeight){ }
}

HTMLCanvasElement.prototype.getContext = () => { 
  return new ContextMock
};

contextオブジェクト生成後にfillStyleとfillRectが使用されるので、定義しています。
fillRectが受け取る引数も検証したい場合はjest.fn()の利用が考えられます。

jest.config.jsの設定

作成したmockファイルをjest.config.jsに設定します。
setupFilesにmockファイルのファイルパスを渡します。

module.exports = {
  preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',
  moduleNameMapper: {
    '\\.css$': '<rootDir>/tests/styleMock.js'
  },
  setupFiles:['<rootDir>/tests/canvasMock.js']
}

document.body.innerHTMLにhtmlを代入

テストファイルにて、 document.body.innerHTMLにhtmlを代入します。

'<canvas id="gray_scot_model_canvas" width="800" height="500" class="canvas">' +
'</canvas>';

これによりjestでgetElementByIdがコールされた時にcanvasObjectが帰ってくるようになります。

以上で、canvas.getContext('2d')からmockが帰ってきてjest出来るようになります。