unit-testing - Vue.js 单元 :testing - How to handle a mixin and pass it props

Question

我正在尝试测试使用混合 (vue-howler) 的 AudioPlayer 组件

<script>
import VueHowler from "vue-howler";

...

export default {
  mixins: [VueHowler],
  name: "audioPlayer",
  data() {
    return {
      percentage: 0
    };
  },
...
</script>

我需要将 props 传递给 mixin，我该怎么做？

  sources ( an Array of audio files ), autoplay (Boolean ) , ...

我的 AudioPlayer.spec.js

import Vue from "vue";
import { shallowMount } from "@vue/test-utils";
import Vuetify from "vuetify";
import AudioPlayer from "@/components/Home/AudioPlayer.vue";
import VueHowler from "vue-howler";


describe("AudioPlayer.vue", () => {
  beforeEach(() => {
    Vue.use(Vuetify);
    const el = document.createElement("div");
    el.setAttribute("data-app", true);
    document.body.appendChild(el);
  });

  const sourceFiles = [require("@/assets/audio/ultimo_desejo.mp3")];

  it("should emit an event PLAY/PAUSE  from playPauseBtn", () => {
    // given
    const wrapper = shallowMount(AudioPlayer, {
      attachToDocument: true,
      mixins: [VueHowler]
    });
    wrapper.setData({ paused: true, playing: false });
    console.log(wrapper.html());
  });

vue-howler 混合

import { Howl } from 'howler'
import clamp from 'math-clamp'
import values from 'object-values'
import assign from 'object-assign'

export default {
  props: {
    /**
     * An array of audio file urls
     */
    sources: {
      type: Array,
      required: true,
      validator(sources) {
        // Every source must be a non-empty string
        return sources.every(
          source => typeof source === 'string' && source.length > 0
        )
      }
    },
    /**
     * Whether to start the playback
     * when the component is mounted
     */
    autoplay: {
      type: Boolean,
      default: false
    },
    /**
     * Whether to start the playback again
     * automatically after it is done playing
     */
    loop: {
      type: Boolean,
      default: false
      ....

Answer 1

已解决...需要在 shallowMount 中的 mixin 之前传递 propsData

  const sourceFiles = ['require("@/assets/audio/ultimo_desejo.mp3"']

  it("should emit an event PLAY/PAUSE  from playPauseBtn", () => {
    // given
    const wrapper = shallowMount(AudioPlayer, {
      // attachToDocument: true,
      propsData: {
        sources: sourceFiles,
        autoplay: false,
        loop: false
      },
      mixins: [VueHowler]
    });
    wrapper.setData({ paused: true, playing: false });
    console.log(wrapper.html());
  });