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在使用BootstrapVue时的别名组件名称。

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

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

1 个答案: