Vue 测试工具未检测到 Bootstrap 组件

Question

我正在尝试测试一个使用子组件WarnOnUnsavedModal 的组件。但是，我并没有尝试测试子组件。

子组件使用<b-modal>，并在node_modules 中导入一个名为bBtn 的组件。

当我尝试运行我的测试文件时，它失败并显示以下消息：

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

SyntaxError: Unexpected identifier

我的测试文件：

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

我尝试在存根中添加这样的一行：

stubs: {
    ModalWarnOnSave: true,
},

为什么这里没有提取该组件？我尝试将localVue.use() 换成Vue.use()，但无济于事。

我需要做什么才能运行此测试？我很乐意忽略导致问题的子文件。

Answer 1

试试这个：

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

bBtn 不是b-button 组件的导出名称。 b-btn 是 Vue.use'ing BootstrapVue 时的别名组件名称。

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