使用 jest 时如何模拟模块

Question

我在 vuejs2 项目中使用 Jest 进行单元测试，但被困在模拟 howler.js 中，这是一个导入到我的组件中的库。

假设我有一个名为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>

然后我有一个名为Player.spec.js测试文件。 测试代码是根据此处的答案编写的，但由于called未设置为 true，因此测试失败。 运行此测试时，似乎不会调用模拟构造函数。

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
  })
})

虽然我在这里使用 Vuejs，但我认为这是一个与 Jest 的mock API 的使用相关的更普遍的问题，但我无法进一步了解。

Answer 1

您链接到的 SO 仅适用于反应组件。 这是一种模拟模块的方法，可以通过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()
  })
})