Getting [Vue warn]: Unknown custom element: <b-modal> even though bootstrap-vue is registered

3.3k Views Asked by U Design We Code At 07 June 2019 at 18:52

A BootstrapVue b-modal component in a custom Vue component loads correctly in the browser. However, when testing using mocha+mochapack, it generates a Vue warning that the b-modal element is not registered. The test is using a localVue object that has BootstrapVue registered. All other bootstrap custom elements seem to be loading correctly, and do not generate any warnings.

I tried various things, including importing BModal from 'bootstrap-vue' and registering it as a component directly, but still got the same error.

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


});

The custom Vue component:

<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>

The tests run correctly and pass, but it outputs the Vue warning for the b-modal element. It doesn't output the warning for b-form.

Original Q&A

There are 3 best solutions below

Robson Braga On 07 June 2019 at 19:51

If only shallowMount not work. You can try stub your bootstrap's components individually.

Like this:

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

});

Troy Morehouse On 18 June 2019 at 01:16

You need to set the attachToDocument: true flag when you mount b-modal (or your test component/app). It needs reference to the document/body in order for it to open (needs to add classes, etc to <body> as well as a few listeners.

Rodolfo Santos On 31 March 2021 at 00:36

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


});

Try that.

Getting [Vue warn]: Unknown custom element: <b-modal> even though bootstrap-vue is registered

There are 3 best solutions below

Related Questions in VUEJS2

Related Questions in MOCHA.JS

Related Questions in BOOTSTRAP-VUE

Related Questions in VUE-TEST-UTILS

Related Questions in MOCHA-WEBPACK

Trending Questions

Popular # Hahtags

Popular Questions