如何在 vue-test-utils 中正确挂载 b-table 组件

Question

我正在使用buefy css lib 和vue.js 框架。

我正在尝试对我的 vue 组件 (Foo) 进行单元测试，该组件具有来自 buefy 的 b-table 组件：

<b-table :data="foo" class="container" style="width: 50%">
        <b-table-column v-slot="props">
            <b-icon
                pack="fas"
                icon="times"
                class="is-clickable"
                @click.native="doSomething(props.row)"
            ></b-icon>
        </b-table-column>
</b-table>

注意嵌入的b-icon

在Foo.spec.js 测试文件中，我尝试使用来自vue-test-utils 的shallowMount 安装组件：

import Buefy from "buefy";
import { shallowMount, createLocalVue } from "@vue/test-utils";
import Foo from './Foo.vue'

const localVue = createLocalVue();
localVue.use(Buefy);

const wrapper = shallowMount(Foo, {
    localVue,
});

现在我想使用返回的包装器对 b-icon 执行一些操作，这些操作应该嵌入到表格列中。

const icon = wrapper.find('.is-clickable')

icon.vm.$emit('click')

但我得到了错误：

TypeError: Cannot read property '$emit' of undefined

问题是，这个b-icon 实际上在包装器中丢失了。可以通过wrapper.html()确认：

<b-table-stub data="[object Object],[object Object]" columns="" headercheckable="true" checkboxposition="left" isrowselectable="[Function]" isrowcheckable="[Function]" checkedrows="" mobilecards="true" defaultsortdirection="asc" sorticon="arrow-up" sorticonsize="is-small" sortmultipledata="" currentpage="1" perpage="20" showdetailicon="true" paginationposition="bottom" rowclass="[Function]" openeddetailed="" hasdetailedvisible="[Function]" detailkey="" detailtransition="" total="0" filtersevent="" showheader="true" class="container" style="width: 50%;">
      <b-table-column-stub visible="true" thattrs="[Function]" tdattrs="[Function]"></b-table-column-stub>
</b-table-stub>

b-icon 神奇地消失了。

通过mount 完全安装也无济于事：

<div class="b-table container" style="width: 50%;">
      <!---->
      <!---->
      <!---->
      <div class="table-wrapper has-mobile-cards">
        <table class="table">
          <!---->
          <tbody>
            <tr draggable="false" class="">
              <!---->
              <!---->
              <!---->
            </tr>
            <transition-stub name="">
              <!---->
            </transition-stub>
            <!---->
            <tr draggable="false" class="">
              <!---->
              <!---->
              <!---->
            </tr>
            <transition-stub name="">
              <!---->
            </transition-stub>
            <!---->
            <!---->
          </tbody>
          <!---->
        </table>
        <!---->
      </div>
      <!---->
</div>

如何访问嵌入在表格列中的数据/组件？

b-table 文档：link

b-table源代码：link

Answer 1

尝试像这样使用shallowMount，但自己存根b-table-column：

const BTableColumnStub = {
  template: <span class="b-table-column-super-stub"><slot name="props"></slot></span>
}

const wrapper = shallowMount(Foo, {
  localVue,
  stubs: {
    BTableColumn: BTableColumnStub  
  }
});

您的组件中的BIcon 作为命名槽props 传递。默认 Jest 的存根只是存根组件而不考虑插槽。我认为这应该有助于呈现BIcon。

顺便说一句，如果你想触发click 事件，你应该调用 await icon.trigger('click') 不是 icon.vm.$emit('click')。但是要测试事件侦听器，您也可以调用 wrapper.vm.$emit('your-event') ，我的意思是您应该在正在侦听该事件的组件上调用 $emit，而不是在会发出该事件的组件上。

Answer 2

b-table 有子组件。 您可以尝试使用 mount 而不是 shallowMount。 这将呈现 b-table。