How do you open a bootstrap-vue modal with vue-test-utils?

vue-test-utils bootstrap-vue
vue/test-utils modal
bootstrap-vue tutorial
bootstrap-vue vs bootstrap
vue-test-utils v-model
bootstrap-vue modal not working
vue test utils sync
bootstrap-vue icons

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?

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

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);
    });
});

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.

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

You can see how BootstrapVue tests their modals at https://github.com/bootstrap-vue/bootstrap-vue/blob/dev/src/components/modal/modal.spec.js

[Vue.js] How do you open a bootstrap-vue modal with vue-test-utils , I'm using the basics that come with Laravel, bootstrap-vue, vue-test-utils, mocha, and mocha-webpack. I'm trying to open the modal with wrapper. A plugin to open stocked modals windows, event based, with just one component in your DOM. What do you mean with "just one component"? e.g. if you want to have 3 modals, you don't need to add the component 3 times, just one (preferably in the root of your app) and open as many modals as you want by using an Event Bus. Install. Install with npm:

I was looking at the bootstrap-vue test on github as Troy suggested (https://github.com/bootstrap-vue/bootstrap-vue/blob/dev/src/components/modal/modal.spec.js)

There you can see that they are using the prop static: true. Adding this to my code solved my problem.

component.vue

<b-modal
    v-model="showModal"
    id="myModal"
    data-qa="importModal"
    :static="true"
>
</b-modal>

component.spec.js

it ('opens a modal', (done) => {
    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);
    button.trigger('click');

    Vue.nextTick(() => {
      expect(modal.isVisible()).toBe(true);
      done();
    });
});

I had to select the modal by id because the inner part is getting display: none. When I put a data-qa on the modal it sticks on the outer element which is not hidden itself. Another solution for that would be to select it the following way: const modal = wrapper.find('[data-qa="modal"] .modal');

But I still get the following warning in my console: [BootstrapVue warn]: observeDom: Requires MutationObserver support.

Jest Unit Tests: modal component · Issue #4589 · bootstrap-vue , bootstrap-vue/src/components/modal/modal.spec.js but note that with the latest Vue test utils, the await nextTick is required since tests [Snyk] Upgrade bootstrap-vue from 2.0.4 to 2.4.0 estafette/estafette-ci-web#19. Open. Most probably you will use them to get user consent for using cookies or to accept a privacy policy on a website, display a registration/login form or some extra details like map and/or contact form. You can find dozens of predefined modal templates in our docs. You may also wish to check out our modal generator.

In my case this work perfectly,

Here I have a b-modal in template with a id="modal-1" and when the button is clicked bootstrap-vue modal is opened using showModal() method.

Try this:

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

Issues with triggering ok event in modal after updating to vue test , Describe the bug I am having issues with testing ok event in bootstrap modal after upgrade to vue test utils (version 30). I have code with modal  Vue Modal examples & templates Vue Bootstrap Modal examples & templates. Multiple examples and advanced usage. Modal Cookies, Coupon, Discount, Abandoned Card, Related Content, Poll, Cart, Youtube, Product and many more.

Getting Started, Before getting started with BootstrapVue, you should have general familiarity with the v-b-modal directive as a plugin: import { ModalPlugin } from 'bootstrap-vue' To cherry pick a component/directive, start by importing it in the file where it is reduce bundle sizes (and will only include the babel helper utils once) at the  The Bootstrap 4 beta is “right around the corner,” and I’m sure there are plenty who are excited to start using it with Vue. Well, they already can, using bootstrap-vue.

Vue Test Utils v1 finally released! More reliable, better testing , Before I start, I'll share my short background on why this release means a lot to We have been using Jest and VueTestUtils since the first time we migrate to Take a look at this example (using b-modal from bootstrap-vue):. Overview <b-modal>, by default, has an OK and Cancel buttons in the footer. These buttons can be customized by setting various props on the component. You can customize the size of the buttons, disable buttons, hide the Cancel button (i.e. ok-only), choose a variant (e.g. danger for a red OK button) using the ok-variant and cancel-variant props, and provide custom button content using the ok

vue-loading-overlay, Vue.js component for full screen loading indicator. Miss any of our Open RFC calls?Watch the recordings here! » import 'vue-loading-overlay/dist/vue-​loading.css'; This package is using Jest and vue-test-utils for testing. The above directive assumes the root element of the input/component is the input. For handling edge cases where the input might be nested deeper inside a component, you can do the following which will work for both components where the input (or button) is the root element as well as input (or button) nested inside additional markup (i.e. b-form-file, b-form-checkbox, b-form-radio, etc):

Comments
  • Have you found a solution or workaround for this problem?
  • After 2 days wasted on trying multiple solutions static: true solved it for me! (I'm also receiving Requires MutationObserver supportwarning.)
  • Thank you for your suggestion. It does work perfectly in the browser. My problem is not with the modal not working in the browser. I can't seem to get vue-test-utils to open the modal in a test I'm trying to write. I've updated my question with the test I'm trying to run on exactly the code you've shown.