为什么 Bootstrap-Vue tables (b-table) 在 @vue/test-utils 的单元测试中被挂载为 "b-table-stub"，而不仅仅是 b-table？

Question

我是 Vue 单元测试的新手，我使用@vue/test-utils。这是我的 Foo.vue

<template>
  <div class="hello">
    <b-table striped hover :items="items"></b-table>
  </div>
</template>

<script>
export default {
  name: "Foo",
  data() {
    return {
      items: [
        {
          id: 0,
          name: "foo",
        },
        {
          id: 1,
          name: "bar",
        },
      ],
    };
  },
};
</script>

这是我的 Foo.spec.js 文件，用于测试 Foo.vue 组件：

import { shallowMount,createLocalVue } from '@vue/test-utils'
import Foo from '@/components/Foo.vue'
import {BootstrapVue} from "bootstrap-vue"

const localVue = createLocalVue();

localVue.use(BootstrapVue);

describe('Foo.vue', () => {
  it('renders bootstrap table', () => {
    const wrapper = shallowMount(Foo, {localVue})
    expect(wrapper.contains("b-table")).toBe(true)
  })
})

当我运行测试时出现错误；

● Foo.vue › renders bootstrap table

    expect(received).toBe(expected) // Object.is equality

    Expected: true
    Received: false

即使必须安装 b-table 元素。当我用 expect(wrapper.contains("b-table-stub")).toBe(true) 替换代码片段 expect(wrapper.contains("b-table")).toBe(true) 时，我没有遇到任何错误。

此外，当我从 shallowMount 函数中删除 localVue 资产时，

 const wrapper = shallowMount(Foo, {localVue})
 expect(wrapper.contains("b-table")).toBe(true)

没有错误，测试用例运行顺利。

我的问题是为什么b-table、b-pagination等(b-x)元素挂载为b-table-stub？我是否被迫在测试用例中检查所有 b-x 元素，如 b-x-stub，或者是否有任何捷径？

Answer 1

您使用 shallowMount() 挂载了您的组件“Foo”。

Per vue-test-utils v2 docs shallowMount 存根子组件，这样您就可以专注于测试组件 Foo 的逻辑，而无需安装子组件及其子组件。这使得测试 Foo 的特定逻辑更加容易。此外，它使测试更有效率，因为我们本质上是在内存中构建 DOM 并且我们可以通过这样做避免不必要地在内存中渲染太多。

如果您需要测试 b-table，请改用 mount(Foo)。此外，如果您只想测试 b-table 而忽略其他组件，您可以像这样存根其他子组件：

mount(Foo, {
  ...
  stubs: {
    childA: true,
    childB: true
  },
  ...
})

为什么 Bootstrap-Vue tables (b-table) 在 @vue/test-utils 的单元测试中被挂载为 "b-table-stub"，而不仅仅是 b-table？

Why Bootstrap-Vue tables (b-table) are mounted as "b-table-stub" in unit testing in @vue/test-utils , not just b-table?

unit-testing

stub

vue.js

vue-test-utils

bootstrap-vue