如何在单元测试中使用 jest 测试 bootstrap vue 组件的存在？

Question

所以我有一些包含b-form-input组件的代码，我正在测试该组件是否呈现。我正在使用wrapper.find({name: "b-form-input"}).exists()来确定该 bootstrap vue 组件是否存在。但是，当我知道组件正在渲染时，此函数会不断返回 false。我可以就如何正确执行此操作提供一些帮助吗？

Answer 1

查看bootstrap-vue源代码，看起来元素的名称是BFormInput和不是b-form-input（它是使用 kebab-case 注册的）：

https://github.com/bootstrap-vue/bootstrap-vue/blob/2fb5ce823a577fcc2414d78bd43ed9e5351cb1c0/src/components/form-input/form-input.js#L33

...
export const BFormInput = /*#__PURE__*/ Vue.extend({
  name: 'BFormInput',
  ...

您有两种选择来定位组件；使用名称或组件构造函数。例如：

import BootstrapVue, { BFormInput } from 'bootstrap-vue';
import { shallowMount, createLocalVue } from '@vue/test-utils';
import HelloWorld from '@/components/HelloWorld.vue';

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

describe('HelloWorld.vue', () => {
  it('BFormInput exists', () => {
    const wrapper = shallowMount(HelloWorld, { localVue })
    expect(wrapper.find({ name: 'BFormInput' }).exists()).toBe(true);
    expect(wrapper.find(BFormInput).exists()).toBe(true);
  });
});