Question

我有一个具有以下结构的Vue组件

// parent-component.vue
<main>
  <component :is="my.component" @custom-event="callback"/>
</main>

子组件始终具有以下mixin

// child-shared-mixin.js
export default {
  mounted() {
    this.$emit('custom-event')
  },
}

以下是子组件的示例

// child-component.vue
<script>
  import { ChildSharedMixin } from 'mixins'

  export default {
    mixins: [
      ChildSharedMixin
    ],
  }
</script>

因此，无论何时安装child，我都会向父级触发一个事件，然后执行回调。

如何使用Jest和Vue Test Utils测试mixin是否触发了custom-event？

Answer 1

emitted（）返回一个对象，其中包含由包装机虚拟机。

https://vue-test-utils.vuejs.org/api/wrapper/#emitted

因此要测试子组件，您可以执行以下操作：

describe('myComponent',()={
    it('should trigger custom-event on mounted hook',()=>{
        let target=mount(myComponent);
        expect(target.emitted()['custom-event']).toBeTruthy();
    })
})

并测试父组件，通过模拟事件并期望回调被调用，您可以采取另一种方法。看看：

https://vue-test-utils.vuejs.org/api/wrapper/trigger.html

如何测试是否从子组件触发了自定义事件

1 个答案: