how to mock module when using jest

Question

I'm using Jest for unit test in a vuejs2 project but got stuck in mocking howler.js, a library imported in my component.

Suppose I have a component named Player.vue

<template>
  <div class="player">
    <button class="player-button" @click="play">Player</button>
  </div>
</template>

<script>
import { Howl } from 'howler';

export default {
  name: 'audioplayer',
  methods: {
    play() {
      console.log('player button clicked');
      new Howl({
        src: [ 'whatever.wav' ],
      }).play();
    }
  }
}
</script>

then I have its test file named Player.spec.js. Test code was written based on the answer here, but the test failed since called wasn't set as true. It seems that mocked constructor won't be called when running this test.

import Player from './Player';
import Vue from 'vue';

describe('Player', () => {
  let called = false;

  jest.mock('howler', () => ({
    Howl({ src }) {
      this.play = () => {
        called = true;
        console.log(`playing ${src[0]} now`);
      };
    },
  }));

  test('should work', () => {
    const Constructor = Vue.extend(Player);
    const vm = new Constructor().$mount();
    vm.$el.querySelector('.player-button').click();
    expect(called).toBeTruthy(); // => will fail
  })
})

Though I'm using Vuejs here, I considered it as a more general question related to the usage of Jest's mock API, but I'm not able to get further.

Ben Hare · Accepted Answer · 2020-06-11 15:48:10Z

1

The SO you linked to only works for react components. Here is a way to mock the module with a spy on the play function that can be tested with toBeHaveCalled

//import the mocked module
import { Howl } from 'howler'; 
// mock the module so it returns an object with the spy
jest.mock('howler', () => ({Howl: jest.fn()}));

const HowlMock ={play: jest.fn()}
// set the actual implementation of the spy so it returns the object with the play function
Howl.mockImplementation(()=> HowlMock)

describe('Player', () => {
  test('should work', () => {
    const Constructor = Vue.extend(Player);
    const vm = new Constructor().$mount();
    vm.$el.querySelector('.player-button').click();
    expect(Howl).toBeHaveCalledWith({src:[ 'whatever.wav' ]})
    expect(HowlMock.play).toBeHaveCalled()
  })
})

edited Jun 11, 2020 at 15:48

Ben Hare

4,4355 gold badges30 silver badges46 bronze badges

answered Aug 18, 2017 at 11:05

Andreas Köberle

112k58 gold badges281 silver badges308 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

choasia Over a year ago

This solution seems promising to me, but I got TypeError: _howler.Howl.mockImplementation is not a function..

Andreas Köberle Over a year ago

Mhmm, what do you get when logging Howl

choasia Over a year ago

[Function: Howl]

Jason G Over a year ago

mockImplementation doesn't exist

Collectives™ on Stack Overflow

how to mock module when using jest

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related