Получение [Vue warn]: неизвестный пользовательский элемент: <b-modal>, даже если bootstrap-vue зарегистрирован - PullRequest
Новая
       50

Получение [Vue warn]: неизвестный пользовательский элемент: <b-modal>, даже если bootstrap-vue зарегистрирован

0 голосов
/ 07 июня 2019

b-модальный компонент BootstrapVue в пользовательском компоненте Vue корректно загружается в браузер. Однако при тестировании с использованием mocha + mochapack генерируется предупреждение Vue о том, что b-модальный элемент не зарегистрирован. В тесте используется объект localVue, для которого зарегистрирован BootstrapVue. Кажется, что все другие пользовательские элементы начальной загрузки загружаются правильно и не генерируют никаких предупреждений.

Я пробовал разные вещи, включая импорт BModal из 'bootstrap-vue' и прямую регистрацию его как компонента, но все равно получала ту же ошибку. 

import {mount, createLocalVue} from "@vue/test-utils"
import MyCustomModal from '../js/MyCustomModal';

const localVue = createLocalVue();

import BootstrapVue from 'bootstrap-vue'
localVue.use(BootstrapVue);

describe('MyCustomModal', () => {
    let wrapper = mount(MyCustomModal,{
            localVue
        });

    it('the content is "this is the content"', () => {
        expect(wrapper.find(".modal-content").text()).toEqual('this is the content');
    });


});

Пользовательский компонент Vue: 

<template>
    <b-modal>
        <div class="modal-content">this is the content</div>
        <b-form>
           my form
        </b-form>
    </b-modal>
</template>

<script>
    export default {
        data(){
            return {};
        }
    }
</script>

Тесты выполняются правильно и проходят, но выводит предупреждение Vue для b-модального элемента. Не выводит предупреждение для b-формы.

Ответы [ 2 ]

0 голосов
/ 18 июня 2019

Вам необходимо установить флаг attachToDocument: true при монтировании b-modal (или вашего тестового компонента / приложения).Для его открытия требуется ссылка на документ / тело (необходимо добавить классы и т. Д. К <body>, а также несколько слушателей.

0 голосов
/ 07 июня 2019

Если только мелкое, не работает. Вы можете попробовать заглушки для компонентов начальной загрузки по отдельности.

Как это: 

import {shallowMount} from "@vue/test-utils";
import { BModal, BForm } from 'bootstrap-vue';
import MyCustomModal from '../js/MyCustomModal';

describe('MyCustomModal', () => {
    let wrapper = shallowMount(MyCustomModal,{
            stubs: {
                "b-modal": BModal,
              "b-form": BForm
            }
        });

    it('the content is "this is the content"', () => {
        expect(wrapper.find(".modal-content").text()).toEqual('this is the content');
    });

});
...