bootstrap-vue / bootstrap-vue

BootstrapVue provides one of the most comprehensive implementations of Bootstrap v4 for Vue.js. With extensive and automated WAI-ARIA accessibility markup.

Home Page:https://bootstrap-vue.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Change to Vue 3.2.36+ causes app install to fail when running unit tests via Jest/Vue Test Utils

matthew-steven-bcbssc opened this issue · comments

Describe the bug

We are seeing an issue where our tests are failing when updating Vue past 3.2.36, because Bootstrap Vue does not install its components on any of the mounted instances except for the very first one.

Steps to reproduce the bug

  1. Create a Vue 3.2.36 app, with Bootstrap Vue 2.23.0, and the latest version of Vue Test Utils.
  2. Create a Vue component that uses a Bootstrap Vue component.
  3. Write a unit test using Vue Test Utils that mounts the Vue component multiple times.

The 2nd time the component is mounted, Bootstrap Vue will fail to install its components on the mounted instance.

In unit tests, Bootstrap Vue is used like follows:

import BootstrapVue from 'bootstrap-vue';
import MyComponent from 'wherever';
import { mount } from '@vue/test-utils';

it('test', () => {
    // wrapper1 works fine
    const wrapper1 = mount(MyComponent, {
        global: {
            plugins: [BootstrapVue]
        }
    });

    // In wrapper2, Bootstrap Vue components are not installed...
    const wrapper2 = mount(MyComponent, {
        global: {
            plugins: [BootstrapVue]
        }
    });
});

Expected behavior

Bootstrap Vue should successfully install its components on the app.

Versions

Libraries:

  • BootstrapVue: 2.23.0
  • Bootstrap: 4.x
  • Vue: 4.2.36+

Additional context

The change to this line in Vue 3.2.36 packages/runtime-core/src/compat/global.ts caused this issue:
https://github.com/vuejs/core/compare/v3.2.35..v3.2.36#diff-75628a365e4ab1080099feee8746b3c7dce8af28b1a1752e9037b07618af0006R387

-    app._context[key] = singletonApp._context[key]
+    app._context[key] = Object.create(singletonApp._context[key])

This line causes Bootstrap Vue plugin install function to run multiple times in unit tests, unlike before.

Because Bootstrap Vue install factory function marks itself as installed when it runs, it refuses to install after the first time it runs:

https://github.com/bootstrap-vue/bootstrap-vue/blob/dev/src/utils/plugins.js#L35

If you remove this early return check, Bootstrap Vue installs correctly on all of the unit test runs, and operates as normal.

commented

In part due to the invasion of Ukraine (and other reasons I'm sure), this project appears to no longer be maintained. Vue2 is all you'll get, but there are forks out there you can find which "sort of" work for Vue3 or ones that I can recommend. I am migrating off this (slowly, admittedly) and advise anyone else to do so too.