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
リポジトリ
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出来るようになります。