vue.js test:unit w test-utils & Jest : [vue-test-utils]: wrapper.destroy() 只能在 Vue 实例上调用

Question

为了测试组件中的 beforeDestroy() 挂钩，我编写了以下规范：

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

但是我收到一个错误，即使在文档中使用了 destroy() ...

[vue-test-utils]: wrapper.destroy() 只能在 Vue 实例上调用

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

我哪里错了？

感谢反馈

Answer 1

const player = wrapper.find("#player"); returns DOM 元素的包装，所以基本上是 HTML。

destroy() 销毁一个 Vue 组件实例。

您不能在 "HTML element" 上调用 destroy 函数。我相信你想写 wrapper.destroy()

vue.js test:unit w test-utils & Jest : [vue-test-utils]: wrapper.destroy() 只能在 Vue 实例上调用

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

unit-testing

vue.js

jestjs

vue-test-utils