Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
matthew-steven-bcbssc opened this issue Jul 19, 2023 · 1 comment

Comments

@matthew-steven-bcbssc
Copy link

matthew-steven-bcbssc commented Jul 19, 2023

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.

@anubi
Copy link

anubi commented Aug 11, 2023

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants