使用 Jest 进行 vue.js 单元测试：我应该模拟 HTML5 音频元素吗？答案

【问题标题】：vue.js unit testing with Jest : Should I mock the HTLL5 audio element?使用 Jest 进行 vue.js 单元测试：我应该模拟 HTML5 音频元素吗？
【发布时间】：2019-02-07 21:27:18
【问题描述】：

测试一个包含 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，我应该模拟音频元素吗？哪种方式...作为音频元素处理播放（），暂停（），静音（）...我有点迷茫，我找不到任何与测试此类组件相关的帖子...

【问题讨论】：

标签： unit-testing vue.js jestjs vue-test-utils

【解决方案1】：

你可以使用一个空的声音文件来初始化组件，你可以使用base64数据uri内联它

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

另见： Silent sound data uri?

【讨论】：

【解决方案2】：

我检查 Heading.vue 父组件是如何设置文件属性的，它不是字符串或文件，它是来自计算方法的对象：

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

【讨论】：