Question

自定义Vue组件中的BootstrapVue b-modal组件会在浏览器中正确加载。但是，在使用mocha + mochapack进行测试时，它将生成Vue警告，提示未注册b-modal元素。该测试使用的是注册了BootstrapVue的localVue对象。所有其他引导程序自定义元素似乎都已正确加载，并且不会生成任何警告。

我尝试了各种方法，包括从“ bootstrap-vue”导入BModal并将其直接注册为组件，但是仍然遇到相同的错误。

import {mount, createLocalVue} from "@vue/test-utils"
import MyCustomModal from '../js/MyCustomModal';

const localVue = createLocalVue();

import BootstrapVue from 'bootstrap-vue'
localVue.use(BootstrapVue);

describe('MyCustomModal', () => {
    let wrapper = mount(MyCustomModal,{
            localVue
        });

    it('the content is "this is the content"', () => {
        expect(wrapper.find(".modal-content").text()).toEqual('this is the content');
    });


});

自定义Vue组件：

<template>
    <b-modal>
        <div class="modal-content">this is the content</div>
        <b-form>
           my form
        </b-form>
    </b-modal>
</template>

<script>
    export default {
        data(){
            return {};
        }
    }
</script>

测试可以正确运行并通过，但是会输出b模式元素的Vue警告。它不会输出b形式的警告。

Answer 1

如果只有shallowMount不起作用。您可以尝试分别对引导程序的组件进行存根。

像这样：

import {shallowMount} from "@vue/test-utils";
import { BModal, BForm } from 'bootstrap-vue';
import MyCustomModal from '../js/MyCustomModal';

describe('MyCustomModal', () => {
    let wrapper = shallowMount(MyCustomModal,{
            stubs: {
                "b-modal": BModal,
              "b-form": BForm
            }
        });

    it('the content is "this is the content"', () => {
        expect(wrapper.find(".modal-content").text()).toEqual('this is the content');
    });

});

Answer 2

在挂载attachToDocument: true（或测试组件/应用程序）时，需要设置b-modal标志。它需要引用文档/主体才能打开（需要向<body>以及一些侦听器添加类，等等。

Answer 3

import Vue from 'vue';
import {mount} from "@vue/test-utils"
import MyCustomModal from '../js/MyCustomModal';
    
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue);

describe('MyCustomModal', () => {
    let wrapper = mount(MyCustomModal);

    it('the content is "this is the content"', () => {
        expect(wrapper.find(".modal-content").text()).toEqual('this is the content');
    });


});

试试看。

获取[Vue警告]：未知的自定义元素：<b-modal>，即使注册了boots-vue

3 个答案: