如何使用 vue-test-utils 打开 bootstrap-vue 模式？

我使用 bootstrap 作为我的设计框架，并且一直在使用 bootstrap-vue。现在我想实现一些测试来配合我的组件。我正在编写一个非常简单的测试来确保打开模式。我在 vue-test-utils 中使用什么来打开 bootstrap-vue 模式？

我使用 Laravel、bootstrap-vue、vue-test-utils、mocha 和 mocha-webpack 附带的基础知识。

我正在尝试打开模式wrapper.find('#modal-1').trigger('click')。我尝试过使用指令<b-button v-b-modal.modal-1>我尝试过使用事件<b-button @click="$bvModal.show('modal-1')">。最后，我尝试了一个常规按钮<button @click="showModal = true">与此在 b 模式上<b-modal v-model="showModal">。我也尝试过添加$nextTick在触发器和断言之间。

import { createLocalVue, mount } from '@vue/test-utils';
import expect from 'expect';
import BootstrapVue from 'bootstrap-vue';
import MyComponent from '@/components/MyComponent.vue';

const localVue = createLocalVue();

localVue.use(BootstrapVue);

describe ('MyComponent', () => {
    let wrapper;

    beforeEach(() => {
        wrapper = mount(QuotesExceptions, {
            localVue
        });
    });

    it ('opens a modal', () => {
        expect(wrapper.contains('#modal-1')).toBe(false);

        wrapper.find('#btnShow').trigger('click');

        expect(wrapper.contains('#modal-1')).toBe(true);
    });
});

我希望模态出现在包装中expect(wrapper.contains('#modal-1')).toBe(true)这就是断言失败的地方。

Use the attachToDocument: truemount 选项，因为模态需要位于文档中才能打开。

您可以在以下位置查看 BootstrapVue 如何测试其模态：https://github.com/bootstrap-vue/bootstrap-vue/blob/dev/src/components/modal/modal.spec.js https://github.com/bootstrap-vue/bootstrap-vue/blob/dev/src/components/modal/modal.spec.js