Vue 测试实用程序，在 parent 上下文中测试作用域插槽逻辑

Question

我有一个“parent”组件，它唯一的重点是实现一个名为 <VTable>

的自定义 table 组件

我想测试特定于 parent 的逻辑，因为它在 child table.

上的各种作用域插槽的上下文中使用

插槽是根据 header 中提供的属性动态声明的。
给定：

const headers = [
{ trackBy: 'lastName', sortable: true, width: '85px' },
{ trackBy: 'status', sortable: true, width: '95px' }
]

那么下面的插槽将在一个实现中展开

<template>
  <div class="Foo">
    <div class="Foo-table">
      <VTable
        :headers="headers"
        :rows="rows"
        :sort="Sort"
        :numeration="getNumeration"
        :loading="isLoading"
        striped
        numerated
        @sort="onSort"
      >
        <template v-slot:row.lastName="{ row, index }">
          ... Custom Implementation ...
        </template>

        <template v-slot:row.status="{ row, index }">
          ... Custom Implementation ...
        </template>
      ...

我对每个作用域插槽中的特定逻辑感兴趣。

我可以诉诸

const wrapper = shallowMount(
          index,
          {
            localVue,
            mocks,
            store: new Vuex.Store(store),
            stubs: {
              'VTable': VTable
            }
          })

并通过以下方式找到原始输出：

const table = wrapper.findComponent({ name: 'VTable' })

table.vnode.elm.innerHTML

但任何使用 find/findComponent/etc 的尝试。无论是从 wrapper 还是 table 调用都不成功。有没有办法做到这一点？我想不鼓励匹配原始 html。

Answer 1

在我的实例中，解决方案是将 VTable 组件之外的所有其他组件都存入带有范围插槽的组件。

const wrapper = mount(
          index,
          {
            localVue,
            mocks,
            store: new Vuex.Store(store),
            stubs: {
              FooComponent: { template: '<div class="FooComponent"></div>' },
              BarComponent: true,
              ...
            }
          })

这种方法需要注意的是，如果未存根的组件不太通用（这本身可能表明相关组件需要重构），测试可能会变得脆弱

Vue 测试实用程序，在 parent 上下文中测试作用域插槽逻辑

Vue Test utils, Testing scoped slot logic within parent context

vue.js

vue-test-utils