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

Posted 2023-02-22

【中文标题】Vue 测试工具未检测到 Bootstrap 组件

【英文标题】：Vue test utils not detecting Bootstrap component

【发布时间】：2019-12-09 10:57:48

【问题描述】：

我正在尝试测试一个使用子组件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()，但无济于事。

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

【问题讨论】：

你在导入ModalWarnOnSave吗？

【参考方案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

【讨论】：

我应该在哪里使用 BButton？我尝试以各种方式将其添加到存根中，例如BButton、"b-button": BButton" 等，但出现相同的错误

你使用 b-button 有什么原因吗？

如果我导入它而不在文件中使用它，Linter 会对我大喊大叫。如果没有存根它就无法工作，所以我想我会尝试用存根来看看它是否有所作为，但不幸的是它没有

在不知道ComponentName.vue 的结构以及如何导入/使用b-button 的情况下，很难提供帮助。