How do I mock Audio API in Jest properly?

user_382205 0
Viewed 888

I'm writing a test that needs to simulate and provide accessor facilities for validating my Audio implementation is correct. I successfully implemented my setup method like so:

import "regenerator-runtime/runtime";
import { AudioState } from '../src';

export class MockAudio extends Audio {
  src: string;
  state: AudioState;
  duration: number;
  playing: boolean;
  constructor() {
    super();
    this.playing = false;
    this.duration = NaN;
    this.state = AudioState.STOPPED;
    this.src = '';
  }
  fastSeek = (time: number): Promise<void> => {
    this.currentTime = time;
    return Promise.resolve();
  }
  play = (): Promise<void> => {
    this.playing = true;
    this.state = AudioState.PLAYING;
    return super.play();
  }
  pause = (): void => {
    this.playing = false;
    this.state = AudioState.PAUSED;
    return super.pause();
  }
}

HTMLMediaElement.prototype.pause = () => Promise.resolve();
HTMLMediaElement.prototype.play = () => Promise.resolve();

window.Audio = MockAudio;

Object.defineProperty(window, 'MediaSource', {
  writable: true,
  value: jest.fn().mockImplementation((params) => ({
    // MediaSource implementation goes here
    addEventListener: jest.fn(),
  })),
});

As you can see I'm setting the methods up so that they can effect the object properties in a way that simulates the Audio API. I'm wondering how I can do this properly with mockImplementation and defineProperty?

jestjs
1 Answers

You can solve this problem (or mocking any other inbuild API classes) using what is described here: https://jestjs.io/docs/es6-class-mocks#manual-mock

What I like to do is to first define my mocks for later use in a test-utils.js like this:

export const mocks = {
  Audio: {
    pause: jest.fn(),
    play: jest.fn(),
  },
}

Now I mock the actual class in my jest.setup.js (as defined in the jest config):

import { mocks } from "./test-utils"

// Audio mock
global.Audio = jest.fn().mockImplementation(() => ({
  pause: mocks.Audio.pause,
  play: mocks.Audio.play,
}))

and finally I can expect against the mocks in my test:

import { mocks } from "./test-utils"

describe("Something", () => {
  it("should work", () => {
    // run your test here
    expect(mocks.Audio.pause).toHaveBeenCalled()
  })
})

of course remember to clean up the mocks as needed.

And the relevant part of the jest config in my package.json to trigger the setup file:

  "jest": {
    ...,
    "setupFilesAfterEnv": [
      "<rootDir>/jest.setup.js"
    ],
    ...
  },
user_111642200
Related