Javascript 如何使用Jest测试具有子组件的Vue组件

我是前端测试新手，现在我花了两天多的时间尝试测试一个组件，但没有取得任何进展

我的组件CreateStoryForm如下所示：

<template>
  <v-card>
    <v-card-title>Title</v-card-title>
    <v-card-text>
      <v-form>
        <base-btn-text
          @click="cancel()"
          class=cancel
        >
          Cancel
        </base-btn-text>
      </v-form>
    </v-card-text
  </v-card>
</template>

<script>
  ...
  methods: {
    cancel() {
        this.$emit('cancel');
    },
  }
</script>

现在我想用Jest测试表单组件，看看在按下按钮时是否发出事件“cancel”。但是，我只能在使用默认按钮标记而不是自定义BaseButtonText组件时使其工作

我尝试的是：

使用存根：

 wrapper = shallowMount(CreateStoryForm, {
   ...
   stubs: {
     'base-btn-text': true
  }

->

wrapper.find（'base-btn-text-stub'）。trigger（'click'）不发出事件

将存根与实现一起使用：

 const CancelButton = "<button @click='cancel()'>Cancel</button>"
 ...
 wrapper = shallowMount(CreateStoryForm, {
   ...
   stubs: {
     'base-btn-text': CancelButton
  }


->
wrapper.find（BaseButtonText.trigger（'click'）不发出事件

现在我完全迷路了

 const CancelButton = "<button @click='cancel()'>Cancel</button>"
 ...
 wrapper = shallowMount(CreateStoryForm, {
   ...
   stubs: {
     'base-btn-text': CancelButton
  }

 import BaseButtonText ...
 Vue.component('base-btn-text, BaseButtonText);