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

Question

我使用 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>我试过使用 event <b-button @click="$bvModal.show('modal-1')">。最后，我<button @click="showModal = true">在 b-modal 上尝试了一个带有这个的常规按钮<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)，这就是断言失败的地方。

Answer 1

就我而言，这工作完美，

在这里，我在模板中有一个带有 a的 b 模态id="modal-1"，当单击按钮时，将使用showModal()方法打开 bootstrap-vue 模态。

尝试这个：

<template>

    <b-button v-on:click="showModal()">
    <b-modal id="modal-1"></b-modal>

</template>

<script>
    methods: {
        showModal() {
              this.$root.$emit("bv::show::modal", 'modal-1', "#btnShow");
          },
    }

</script>