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

Posted 2023-02-22

【中文标题】如何使用 jest 在单元测试中测试引导 vue 组件的存在？

【英文标题】：How to test for the existance of a bootstrap vue component in unit tests with jest?

【发布时间】：2019-11-21 17:30:00

【问题描述】：

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

【问题讨论】：

wrapper.html() 给你什么？您可以import BInputGroup from 'bootstrap-vue' 并使用wrapper.find(BInputGroup)。看源码，组件的名字是“BInputGroup”，所以可能需要使用wrapper.find(name: "BInputGroup")

是的，第二个有效，我还打了一个错字，我修正了我在寻找 b-form-input 时正在寻找 b-input-group。第一种方法报错：[vue-test-utils]: wrapper.find() must be passed a valid CSS selector, Vue constructor, or valid find option object。你会写一个答案让我接受吗？

【参考方案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);
  );
);