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

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-формы не выводится.


person U Design We Code    schedule 07.06.2019    source источник
comment
Вы пытаетесь использовать shallowMount вместо mount из vue-utlis?   -  person Robson Braga    schedule 07.06.2019


Ответы (3)


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

Нравится:

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

});
person Robson Braga    schedule 07.06.2019
comment
Я попытался заглушить компоненты таким образом, но у меня возникла ошибка: Ошибка: [vue-test-utils]: значения options.stub должны быть переданы в виде строки или компонента - person U Design We Code; 11.06.2019
comment
Да, потому что я импортировал компоненты {BModal, BForm} индивидуально из bootstrap-vue. У вас есть импортированные компоненты выше? - person Robson Braga; 11.06.2019
comment
Если не работает, можно попробовать заглушку с простой строкой с таким именем компонента: заглушки: {b-modal, b-form} - person Robson Braga; 11.06.2019
comment
Да, импортировал компоненты BModal и BForm, не сработало. Замещение их строками позволило мне скрыть ошибку, и это хорошо. Однако теперь я не могу проверить, действительно ли модальное окно работает (имеется в виду всплывающее окно). - person U Design We Code; 12.06.2019
comment
Да просто строка не имеет возможности проверить подкомпонент, просто заглушите их. : / Но если вы можете импортировать эти компоненты по отдельности, вы наверняка сможете протестировать компоненты с приписанными заглушками. - person Robson Braga; 12.06.2019
comment
заглушки: {b-modal, b-form} ‹- это синтаксическая ошибка - person CENT1PEDE; 11.01.2020
comment
Да, @ CENT1PEDE, ты прав. Правильный синтаксис должен быть stubs: { "b-modal": true, "b-form": true } или вместо этого явные компоненты должны быть истинными. Спасибо за улов. Заготовки документов: vue-test-utils.vuejs.org/api/options .html # stubs - person Robson Braga; 16.01.2020
comment
stubs: { "b-modal": true, "b-form": true } отлично работает! - person Giorgio Tempesta; 27.02.2020

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

person Troy Morehouse    schedule 18.06.2019
comment
options.attachToDocument устарел в пользу options.attachTo. - person Lux Ilustre; 30.05.2021

import Vue from 'vue';
import {mount} from "@vue/test-utils"
import MyCustomModal from '../js/MyCustomModal';
    
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue);

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

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


});

Попробуй это.

person Rodolfo Santos    schedule 31.03.2021