Unit testing Vue.js test:unit和test-utils和Jest:Nested组件-是否可以从子组件模拟$emit（函数）？

给定嵌套组件

Heading.vue组件 {$t（“lang.views.home.heading.btn_ulisten”）} 弹箭

嵌套的子组件AuioPlayer.vue

     <template>
       <div style="display: inline-block;">
         <v-btn id="playPauseBtn">
           ...
         </v-btn>
         <v-btn id="stopBtn" outline icon class="inline teal--text" @click.native="stop()">
           <v-icon>stop</v-icon>
         </v-btn>
         <v-btn id="muteBtn">
           ...
         </v-btn>>
       </div>
     </template>

 <script>
    ...
     methods: {
            stop() {
                this.$data._howl.stop();
                this.$emit("playerStop");
            },
     ...
 </script>

更新

我实现了两个解决方案，但都没有成功

1/使用间谍功能

it("should display LISTEN button on child component audioplayer event stop()", () => {
  // given
  wrapper = shallowMount(Heading, { router, i18n });
  const spy = jest.fn();
  // wrapper.vm.$on('stopPlayer', spy);  // focus on the call of listener
  wrapper.setData({ listening: true });
  const audioplayer = wrapper.find('audioplayer-stub');
  // when
  audioplayer.trigger('stopPlayer');
  // then
  expect(spy).toHaveBeenCalledTimes(1);
  expect(wrapper.vm.listening).toBe(false);
});

2/使用异步$emit（）

在这两种情况下，如果我从子组件触发或发射，似乎什么都不会发生…
事实上，emit（）应该从子组件中的一个停止按钮执行，该按钮在此级别上没有存根。。 有没有存根？ 我想避免坐骑。。。使用shallowMount在这个TET级别应该足够了

---

感谢您的反馈

已解决。。。这是单元测试vue.js时要避免的陷阱之一：我应该测试什么？而不是测试错误的东西

使用test utils w shallowMount，我不应该测试存根组件中的emi（）事件（这应该稍后在此组件中进行测试），我应该只测试将被调用的方法。。。 在这种情况下

方法：{ playerStop（）{ 这是错误的； } }

简单测试

  it("method playerStop should tpggle listening to false", async () => {
    // given
    wrapper = shallowMount(Heading, { router, i18n });
    wrapper.setData({ listening: true });
    // when
    wrapper.vm.playerStop();
    const playBtn = wrapper.find('#playBtn')
    // then
    expect(wrapper.vm.listening).toBe(false);
  });

---

这是正确的，测试可以更好，但代表了这个概念背后的想法。我推荐阅读这篇文章，非常有用。

it("should display LISTEN button on child component audioplayer event stop()", async () => {
  // given
  wrapper = shallowMount(Heading, { router, i18n });
  wrapper.setData({ listening: true });
  const audioplayer = wrapper.find('audioplayer-stub');
  // when
  audioplayer.vm.$emit('stopPlayer');
  await wrapper.vm.$nextTick();
  // then
  expect(wrapper.vm.listening).toBe(false);
});

  it("method playerStop should tpggle listening to false", async () => {
    // given
    wrapper = shallowMount(Heading, { router, i18n });
    wrapper.setData({ listening: true });
    // when
    wrapper.vm.playerStop();
    const playBtn = wrapper.find('#playBtn')
    // then
    expect(wrapper.vm.listening).toBe(false);
  });