1

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.

1
  • Are you importing ModalWarnOnSave? Commented Aug 2, 2019 at 16:17

1 Answer 1

1

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

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

4 Comments

Where do I then use BButton? I tried adding it to stubs in various ways such as {BButton}, "b-button": BButton" etc but the same error appears
Is there an reason you are stubbing b-button?
If I import it without using it in the file the Linter shouts at me. And it wasn't working without stubbing so I thought I'd try it with stubbing to see if it made a difference but it didn't unfortunately
Without knowing the structure of ComponentName.vue and how you are importing/using b-button, it is hard to help.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.