Vue test utils not detecting Bootstrap component

Question

I'm trying to test a component that uses a child component WarnOnUnsavedModal. I'm not trying to test the child component, however.

The child component uses <b-modal>, and in node_modules, that imports a component called bBtn.

When I try to run my test file, it fails with the following message:

import bBtn from '../button/button';
       ^^^^

SyntaxError: Unexpected identifier

My test file:

import BootstrapVue, { bBtn } from 'bootstrap-vue';
import { mount, createLocalVue } from '@vue/test-utils';
import ComponentName from '../ComponentName.vue';

const localVue = createLocalVue();
localVue.use(BootstrapVue);

describe('ComponentName', () => {
    it('Has props', () => {
        const wrapper = mount(ComponentName, {
            store,
            createLocalVue,
            stubs: {
                ModalWarnOnSave,
                'b-btn': bBtn,
            },
            propsData: {
                resourceType: 'General',
            },
        });

        expect(1 + 1).toBe(2);
    });
});

I've tried adding a line like this to the stubs:

stubs: {
    ModalWarnOnSave: true,
},

Why isn't that component being picked up here? I've tried swapping out localVue.use() with Vue.use(), to no avail.

What do I need to do to get this test to run? I'm happy to ignore the child file that's causing the problem.

Troy Morehouse Troy Morehouse · Accepted Answer · 2019-08-01T06:48:07

Try this:

import BootstrapVue, { BButton } from 'bootstrap-vue'

bBtn is not the exported name of the b-button component. b-btn is an alias component name when Vue.use'ing BootstrapVue.

See https://bootstrap-vue.js.org/docs/components/button#importing-individual-components

Vue test utils not detecting Bootstrap component

1 Answers