Jest で audio をモックする

composition api の勉強がてら色々とコードを書いていて、Jest でテストを書く際にうまく mock できないことがあった。

そもそも Jest 自体詳しくないのでやってることがおかしいかもしれないが、こんな感じのコードを書いてエラーになった。

// sound 自体は new Audio() を実行した HTMLAudioElement
const { sound } = useErrorSound()

const playStub = jest.spyOn(sound, 'play');

// 処理を実行
// Error: Not implemented: HTMLMediaElement.prototype.play
expect(playStub).toHaveBeenCalled()

.mockImplementation() が必要だったと言う話で、これで動くようになった。

// sound 自体は new Audio() を実行した HTMLAudioElement
const { sound } = useErrorSound()

const playStub = jest.spyOn(sound, 'play').mockImplementation();

// 処理を実行
expect(playStub).toHaveBeenCalled()

調べてる途中でこの stack overflow みつけたが、HTMLMediaElement をそのまま spyOn に指定すれば良いらしい。

stackoverflow.com

const playStub = jest
  .spyOn(window.HTMLMediaElement.prototype, 'play')
  .mockImplementation(() => {})