Tests using createLocalVue() display warning (rc.20)

[Trainmaster]

Describe the bug

Tests using bootstrap-vue and createLocalVue() output the following warning

[BootstrapVue warn]: Multiple instances of Vue detected!
See: https://bootstrap-vue.js.org/docs#using-module-bundlers

The test code looks like:

  beforeEach(() => {
    const localVue = createLocalVue();
    localVue.use(BootstrapVue);

    wrapper = mount(SomeComponent, { localVue });
  });

Expected behavior

Tests run successfully without warnings.

Versions

Libraries:

• bootstrap-vue: 2.0.0-rc.20
• bootstrap: 4.3.1
• vue: 2.6.10
• jest: 24.8.0
• vue-jest: 3.0.4
• @vue/test-utils: 1.0.0-beta.29

Environment:

Jest

Possible solution?!

The issue can be fixed by moving the localVue.use() statement from the test file

  beforeEach(() => {
    const localVue = createLocalVue();
    sectionPallet = mount(SectionPallet, { localVue });
  });

to the jestSetup.js.

import Vue from 'vue';
//...
Vue.use(BootstrapVue);

Now the tests run successfully. But the question is: Is that intended?

[tmorehouse]

The warnings should not cause tests to fail (but will place console warns in your test logs)

Adding the Vue.use in jestSetup.js would include the full library in each test, rather than testing for just the certain components in our test suites.

You can disable BootstrapVue warns by setting process.env.BOOTSTRAP_VUE_NO_WARN = true before running your tests.

https://bootstrap-vue.js.org/docs/misc/settings#disabling-bootstrapvue-console-warnings

You can also set up a console.warn mock to trap the warns (which we have done in some of our tests):

  beforeAll(() => {
    // Prevent multiple Vue warnings in tests
    jest.spyOn(console, 'warn').mockImplementation(() => {})
    // Install plugin after we have trapped console.warn
    localVue.use(toastPlugin)
  })

  afterAll(() => {
    console.warn.mockClear()
  })

[Trainmaster]

@tmorehouse You're right, it's just a warning but we've configured our tests so that any console.(error|log|warn) results in failing tests. And I don't see a reason why warnings should not cause tests to fail. Quite the contrary, it helped us fixing some issues when updating packages.

Anyway, can we expect that using localVue.use() will work again without disabling warnings or using console traps? Is it probably more an issue of https://github.com/vuejs/vue-test-utils/?

[tmorehouse]

It is more of an upstream issue with vue-test-utils when dealing with libraries that need to use Vue.use or Vue.extend or import Vue from 'vue' in them (in our case, we need to use Vue.extend in many places, so we import Vue from 'vue').

The warning is output to prevent duplicate issues like #3040

Several other libraries would run into this same test issues, such as portal-vue (which imports Vue)

[tmorehouse]

I don't know if vue-test-utils provides an option to alias 'vue' for import Vue from 'vue' when using createLocalVue(), as in most cases the individual components are imported for testing before using a localVue instance.

[tmorehouse]

PR #3315 will suppress the multiple Vue warning if we detect that BoosttrapVue is running under vue-test-utils and JSDOM

[tmorehouse]

Version 2.0.0-rc.21 has been released

[cheesytim]

@tmorehouse thx!

[tmorehouse]

@Tim152 version 2.0.0-rc.22 will hopefully be released today or tomorrow, which fixes issues introduced with rc.21

[Petercopter]

Heyo it looks like [email protected] is causing this warning to pop up again. It seems like the appropriate course of action is to add

import { BootstrapVue } from 'bootstrap-vue'
import Vue from 'vue'

Vue.use(BootstrapVue)

to Jest setup, and then remove localVue.use(BootstrapVue)? Are there any downsides to this approach? It seems cleaner...

Edit: Can I do the same thing with Vuex?

[Trainmaster]

I think that with your approach one have to use the same global Vue object in all tests. And depending on globals in tests can be really painful. That's why I think that the localVue approach is a lot cleaner though more verbose. You're more in control of what being set up in a test.