如何使用vue-test-utils打开bootstrap-vue模态? [英] How do you open a bootstrap-vue modal with vue-test-utils?

问题描述

我正在使用bootstrap作为我的设计框架，并且一直在使用bootstrap-vue.现在，我想实现一些与组件一起进行的测试.我正在编写一个非常简单的测试，以确保已打开模式.在vue-test-utils中使用什么来打开bootstrap-vue模态?

I'm using bootstrap as my design framework and have been using bootstrap-vue. Now I would like to implement some tests to go along with my components. I'm writing a very simple test to make sure a modal is opened. What do I use in vue-test-utils to open the bootstrap-vue modal?

我正在使用Laravel，bootstrap-vue，vue-test-utils，mocha和mocha-webpack随附的基础知识.

I'm using the basics that come with Laravel, bootstrap-vue, vue-test-utils, mocha, and mocha-webpack.

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

I'm trying to open the modal with wrapper.find('#modal-1').trigger('click'). I've tried using a directive <b-button v-b-modal.modal-1> I've tried using an event <b-button @click="$bvModal.show('modal-1')">. And lastly, I tried a regular button <button @click="showModal = true"> with this on the b-modal <b-modal v-model="showModal">. I've also tried adding a $nextTick in between the trigger and the assertion.

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)的包装器中，这是断言失败的地方.

I'm expecting the modal to be in the wrapper with expect(wrapper.contains('#modal-1')).toBe(true) and this is where the assertion is failing.

推荐答案

使用attachToDocument: true挂载选项，因为模态需要在文档中才能打开.

Use the attachToDocument: true mount option, as modal needs to be in the document in order to open.

您可以在 https://github.com/bootstrap-vue/bootstrap-vue/blob/dev/src/components/modal/modal.spec.js

这篇关于如何使用vue-test-utils打开bootstrap-vue模态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！