Vue + Jest global config carrying over into spec files

Question

I'm using VueJS and Jest for unit testing my components.

I'm also using the Bootstrap Vue library for styling. I need to use this plugin in my Jest tests in order to remove some console warnings about unknown plugins.

I have created a setup file as so:

import { createLocalVue } from '@vue/test-utils'
import BootstrapVue from 'bootstrap-vue'

const localVue = createLocalVue()

localVue.use(BootstrapVue)

And configured Jest to use this before every test.

setupFiles: ['<rootDir>/tests/unit/setup']

However, to remove the warnings from the console, I need to use the localVue instance when mounting the component:

const wrapper = shallowMount(MyComponent, {
      localVue,
      propsData: { value: 'someVal }
    })

However there is no way that I can see to get the localVue instance created in the setup.js into the test spec files.

If I do this:

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

Vue.use(BootstrapVue)

It works fine, but this is bad as we should not be using the Global Vue instance in Jest tests.

Is there a way to do what I want to do, or am I going to have to construct the Bootstrap Vue plugins (and others as they come along...) into every single test file?

Answer 1

You could try to assign the localVue variable as a global variable in your setupFiles. This would allow you access localVue variable in every test, like so:

import { createLocalVue } from '@vue/test-utils'
import BootstrapVue from 'bootstrap-vue'

global.localVue = createLocalVue()

global.localVue.use(BootstrapVue)

Then use it like this in your test:

const localVue = global.localVue

const wrapper = shallowMount(MyComponent, {
  localVue,
  propsData: { value: 'someVal' }
})