programing

유닛 테스트에서 jest와 함께 부트스트랩 vue 구성 요소의 존재 여부를 테스트하는 방법?

prostudy 2022. 4. 8. 22:05
반응형

유닛 테스트에서 jest와 함께 부트스트랩 vue 구성 요소의 존재 여부를 테스트하는 방법?

그래서 나는 몇개의 코드를 가지고 있다.b-form-input구성 요소와 나는 그 구성 요소가 렌더링되는지 테스트하고 있다.나는 사용하고 있다wrapper.find({name: "b-form-input"}).exists()부트스트랩 vue 구성 요소가 있는지 여부를 확인하십시오.그러나 이 기능은 구성 요소가 렌더링되고 있다는 것을 알게 되면 계속 거짓을 반환한다.어떻게 해야 제대로 할 수 있을까?

그 모습을 보면서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);
  });
});

참조URL: https://stackoverflow.com/questions/56998626/how-to-test-for-the-existance-of-a-bootstrap-vue-component-in-unit-tests-with-je

반응형