3

In order to test a beforeDestroy() hook in my component, I wrote the following spec :

 it("should test lifecycle when audio tag is destroyed", () => {
    // jsdom doesn't support any loading or playback media operations. 
    // As a workaround you can add a few stubs in your test setup:
    window.HTMLMediaElement.prototype.removeEventListener = () => { /* do nothing */ };
    // given
    const wrapper = mount(AudioPlayer, {
     // attachToDocument: true,
      propsData: {
        autoPlay: false,
        file: file,
        ended,
        canPlay
      }
    });
    wrapper.vm.loaded = true; // enable buttons
    const player = wrapper.find("#player");
    expect(wrapper.contains('#playPauseBtn')).toBe(true);
    // when
    player.destroy()
    // then
    expect(wrapper.contains('#playPauseBtn')).toBe(false);
  });

but I am getting an error, even if the destroy() is used as in the doc ...

[vue-test-utils]: wrapper.destroy() can only be called on a Vue instance

  177 |     expect(wrapper.contains('#playPauseBtn')).toBe(true); // OK
  178 |     // when
> 179 |     player.destroy()

where am I wrong ?

thanks for feedback

2
  • Your message contains wrapper (wrapper.destroy() can only be...), but your code (and the marker) leads to player (player.destroy()) - which one is right? Commented Sep 5, 2018 at 16:33
  • I don’t know , this is exactly thé message I get... I don’t understand either Commented Sep 5, 2018 at 17:08

1 Answer 1

5

const player = wrapper.find("#player"); returns a wrapper of DOM element, so basically HTML.

destroy() destroys a Vue component instance.

You cannot call destroy function on an "HTML element". I believe you wanted to write wrapper.destroy()

Sign up to request clarification or add additional context in comments.

1 Comment

thanks a lot ... wrapper.destroy() is fine ! however I am going to post another question about it

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.