Jest/Vue 测试工具 - 来自子组件作用域插槽的方法 - [Vue 警告]：事件“单击”的无效处理程序：未定义

问题描述

我正在尝试测试调用子组件（即 b-modal）的组件之一。

我测试的组件使用来自 b-modal 的作用域槽来从中获取 close() 方法并将其附加到另一个事件侦听器。看看：

// My custom parent component
<template>
    <b-modal>
        <template #modal-header="{close}">
            <h2 class="card-header-title">
                Coordonnées
            </h2>
            <button class="close close-profile text-dark" @click="close">
                <i class="far fa-times" />
            </button>
        </template>
    </b-modal>
</template>

在我的测试中，我像这样安装我的组件：

return shallowMount(MyCustomParentComponent,{
    ...options,localVue,store,stubs: [
        "b-modal"
    ],});

我的测试通过了，但 Jest 抛出了 console.error 警告：

[Vue warn]: Invalid handler for event "click": got undefined
      
      found in
      
      ---> <Anonymous>
             <Root>
      

我猜我的 b-modal 子组件没有完全挂载（stub、shallowMount）并且没有注入 close() 方法。

我能做什么？我应该模拟 close() 方法吗？沉默警告？还有什么？

感谢您的帮助！

解决方法

您可以自定义 b-modal 的存根，使用模拟 modal-header 渲染 close() 插槽：

it('should call close() on button click',async () => {
  const close = jest.fn()
  const ok = jest.fn()
  const cancel = jest.fn()
  const wrapper = shallowMount(MyModal,{
    stubs: {
      BModal: {
        render(h) {
          return h('div',[
                            this.$scopedSlots['modal-header']?.({close}),this.$scopedSlots['default']?.({ok,cancel})
                          ]
                  )
        }
      }
    }
  });
  await wrapper.find('button.close').trigger('click')
  expect(close).toHaveBeenCalled()
})