用Jest進行vue.js單元測試：是否應該模擬HTLL5音頻元素？

Question

測試包含HTML5元素的AudioPlayer vue組件，我想知道如何用Jest編寫規范。

模板

    <audio id="player" ref="player" @ended="ended" @canplay="canPlay" :src="file"></audio>

如果我使用以下包裝

const wrapper = mount(AudioPlayer, {
      propsData: {
        autoPlay: false,
        file,
        ended,
        canPlay
      }
    });

我應該如何設置文件屬性？ （我想從src / assets / audio / mysong.mp3傳遞音頻文件）

如果我改用shallowMount，是否應該模擬音頻元素？ 哪種方式...隨着音頻元素處理play（），pause（），mutant（）...我有點迷失了，我找不到與測試此類組件相關的任何帖子...

Answer 1

您可以使用一個空的聲音文件來初始化該組件，也可以使用base64 data uri對其進行內聯

const file = 'data:audio/wave;base64,UklGRjIAAABXQVZFZm10IBIAAAABAAEAQB8AAEAfAAABAAgAAABmYWN0BAAAAAAAAABkYXRhAAAAAA==';
const wrapper = mount(AudioPlayer, {
      propsData: {
        autoPlay: false,
        file,
        ended,
        canPlay
      }
    });

另請參閱： 靜音聲音數據uri？

Answer 2

我檢查Heading.vue父組件如何設置file屬性，它不是字符串或文件，而是計算方法中的Object：

 data() {
  return {
    file: "ultimo_desejo",
   ....

computed: {
<audioplayer id="audioplayer" v-if="listening" v-show="showAudioPlayer" :autoPlay="autoPlay" :file="audioFile" :canPlay="audioReady" :ended="switchAudioPlayer" @ended="switchAudioPlayer"></audioplayer>
....

並且在AudioPlayer子組件中

props: {
    file: {
      type: Object,
      default: null
    },  

所以我可以在AudioPlayer.spec文件中設置道具

const file = require("@/assets/audio/ultimo_desejo.mp3");

const wrapper = mount(AudioPlayer, {
  propsData: {
    autoPlay: false,
    file: file,
    ended,
    canPlay
  }
});