title: Vue.js unit:testing - How to handle a mixin and pass it props
body: <p>I am trying to test my AudioPlayer component which is using a mixin ( vue-howler)</p>
  
  <pre><code>&lt;script&gt;
  import VueHowler from "vue-howler";
  
  ...
  
  export default {
    mixins: [VueHowler],
    name: "audioPlayer",
    data() {
      return {
        percentage: 0
      };
    },
  ...
  &lt;/script&gt;
  </code></pre>
  
  <p>I need to pass props to the mixin , how can I do that ?</p>
  
  <pre><code>  sources ( an Array of audio files ), autoplay (Boolean ) , ...
  </code></pre>
  
  <p><strong>my AudioPlayer.spec.js</strong></p>
  
  <pre><code>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", () =&gt; {
    beforeEach(() =&gt; {
      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", () =&gt; {
      // given
      const wrapper = shallowMount(AudioPlayer, {
        attachToDocument: true,
        mixins: [VueHowler]
      });
      wrapper.setData({ paused: true, playing: false });
      console.log(wrapper.html());
    });
  </code></pre>
  
  <p><strong>vue-howler mixin</strong></p>
  
  <pre><code>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 =&gt; typeof source === 'string' &amp;&amp; source.length &gt; 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
        ....
  </code></pre>