Vue.js 如何使用vue测试utils打开引导vue模式？

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

我正在使用Laravel、bootstrap vue、vue test utils、mocha和mocha webpack附带的基本功能

我试图用

包装器打开模态。查找（'#模态-1'）。触发（'click'）

。我尝试过使用指令

我尝试过使用事件

。最后，我在b-modal上尝试了一个常规按钮

。我还尝试在触发器和断言之间添加一个

$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）

一起出现在包装器中，这就是断言失败的地方。

在我的例子中，这工作得很好

这里我在模板中有一个b-modal，带有

id=“modal-1”

，当单击按钮时，将使用

showModal（）

方法打开引导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>

方法：{
showModal（）{
这个.$root.$emit（“bv:：show:：modal”，“modal-1”，“#btnShow”）；
},
}

使用

附件文档：true

装载选项，因为模态需要在文档中才能打开

---

你可以在

上看到BootstrapVue是如何测试他们的modals的。正如特洛伊建议的那样，我正在github上查看BootstrapVue测试（）

在那里你可以看到他们正在使用道具。将此添加到我的代码中解决了我的问题

组件.vue

component.spec.js

it（'打开一个模式'，（完成）=>{
const button=wrapper.find（'[data qa=“button”]'）；
const modal=wrapper.find（'#myModal'）；
expect（button.exists（））.toBe（true）；
expect（button.is（'button'））.toBe（true）；
expect（modal.exists（））.toBe（true）；
expect（modal.is（'div'））.toBe（true）；
expect（modal.isVisible（））.toBe（false）；
按钮。触发器（'click'）；
Vue.nextTick（（）=>{
expect（modal.isVisible（））.toBe（true）；
完成（）；
});
});

我必须通过

id

选择模态，因为内部部分正在获得

display:none

。当我把一个

数据qa

放在模态上时，它粘在外部元素上，而外部元素本身并没有隐藏。另一个解决方案是通过以下方式进行选择：

const modal=wrapper.find（'[data qa=“modal”].modal'）

但我在控制台中仍然收到以下警告：
[BootstrapVue warn]：观察对象：需要变异观察者支持。
感谢您的建议。它在浏览器中工作得非常好。我的问题不是模态在浏览器中不工作。我似乎无法让vue test utils在我试图编写的测试中打开模式。我已经用测试更新了我的问题，我正试图在您显示的代码上运行。您是否找到了解决此问题的解决方案或解决方法？在浪费两天时间尝试多个解决方案之后
static:true
为我解决了它！（我也收到了
需要MutationObserver支持
的警告。）口头解释通常是有帮助的
it ('opens a modal', (done) => {
    const button = wrapper.find('[data-qa="button"]');
    expect(!!document.querySelector('myModal')).toBe(false)
    button.trigger('click');
    expect(!!document.querySelector('myModal')).toBe(true) 
});