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

Question

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.

Do you try use shallowMount instead mount from vue-utlis? — Robson Braga
– Robson Braga, Commented Jun 7, 2019 at 19:27

Robson Braga · Accepted Answer · 2019-06-07 19:51:58Z

2

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

});

answered Jun 7, 2019 at 19:51

Robson Braga

4323 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

U Design We Code Over a year ago

I tried stubbing the components this way, but I got an error: Error: [vue-test-utils]: options.stub values must be passed a string or component

Robson Braga Over a year ago

Yeah, because that, I imported the components { BModal, BForm } individually from bootstrap-vue. Do you have imported components above?

Robson Braga Over a year ago

If no working, maybe try stub with just string with component name like this: stubs: { "b-modal", "b-form" }

U Design We Code Over a year ago

Yeah, I imported the components BModal and BForm, didn't work. Stubbing them with strings allowed me to hide the error, which is good. However, now I can't test that the modal is actually working (meaning as a popup).

Robson Braga Over a year ago

Yeah, @CENT1PEDE you right. The right syntax must be stubs: { "b-modal": true, "b-form": true } or the explicit components instead true. Thanks for catch. Doc stubs: vue-test-utils.vuejs.org/api/options.html#stubs

|

Troy Morehouse · Accepted Answer · 2019-06-18 01:16:09Z

0

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.

answered Jun 18, 2019 at 1:16

Troy Morehouse

5,4451 gold badge30 silver badges40 bronze badges

2 Comments

Lux Scotty Ilustre Over a year ago

options.attachToDocument is deprecated in favor of options.attachTo

Jeremy Hamm Over a year ago

vue-test-utils.vuejs.org/api/options.html#attachto

Rodolfo Santos · Accepted Answer · 2021-03-31 00:36:02Z

0

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.

answered Mar 31, 2021 at 0:36

Rodolfo Santos

811 silver badge2 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

8 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related