如何使用 jest 在单元测试中测试引导 vue 组件的存在? [英] How to test for the existance of a bootstrap vue component in unit tests with jest?

问题描述

So I have some code that has a b-form-input component and I am testing whether that component renders. I am using wrapper.find({name: "b-form-input"}).exists() to determine whether that bootstrap vue component exists. However this function continually returns false when I know that the component is rendering. Could I have some help on how to do this correctly?

解决方案

Looking at the bootstrap-vue source code, it looks like the name of the element is BFormInput and not b-form-input (it was registered using 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',
  ...

You have two options to locate the component; using the name, or the component constructor. For example:

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);
  });
});

这篇关于如何使用 jest 在单元测试中测试引导 vue 组件的存在?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！