0

自定义 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-modal 元素的 Vue 警告。它不输出 b-form 的警告。

4

3 回答 3

2

如果只有 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');
    });

});
于 2019-06-07T19:51:58.160 回答
0 
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');
    });


});

试试看。

于 2021-03-31T00:36:02.263 回答
0

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

于 2019-06-18T01:16:09.857 回答