jestを使用するときにモジュールをモックする方法

Question

私はvuejs2プロジェクトでユニットテストにJestを使用していますが、私のコンポーネントにインポートされたライブラリhowler.jsを嘲笑してしまいました。

は、私は、私はそのテストファイルがPlayer.spec.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> 

という名前のコンポーネントを持っていると仮定します。テストコードは、hereという回答に基づいて書かれましたが、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を使用していますが、私は冗談の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() 
    }) 
})