Running jest with bootstrap-vue

Question

I\'ve been working with vuejs and bootstrap-vue lately. Decided to add unit testing to my project.

I\'m not realy familiar with unit testing so I\'m trying anything I cou

Answer 1

It is also possible to stub components like

const wrapper = mount(Login, {
  mocks: {
    $t: () => 'Connexion' // i18N
  },
  stubs: {
    BCol: true
  }
});

Answer 2

There are two options for this. Firstly, If you use localVue instance you have to register your bootstrap-vue component as global object using this localVue.component("b-breadcrumb", BBreadcrumb)

I will mention to b-breadcrumb as if it any part of boostrap-vue's components.

const localVue = createLocalVue()
localVue.component("b-breadcrumb", BBreadcrumb)
mount(CustomComponent, {
  // Some options
})

Secondly, If you don't use localVueinstance you can register this component as a param of mount method like this

mount(CustomComponent, {
  // Some options
  components: {
    BBreadcrumb
  },
})

There is a important issue that If you use localVue instance components option of mount method will not work.

Also you can ignore any bootstrap-vue component to avoid unneccessary rendering using stubs option of mount method.

mount(CustomComponent, {
  stubs: ["b-breadcrumb"]
})

More information about options of mount here

Answer 3

If you're adding bootstrap vue as a global plugin:

Vue.use(BootstrapVue);

Then in your tests, you're likely going to want to follow this tip:

https://vue-test-utils.vuejs.org/guides/common-tips.html#applying-global-plugins-and-mixins

Which outlines how you can use the createLocalVue() and set it up with the same global config as your app:

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

// create an extended `Vue` constructor
const localVue = createLocalVue()

// install plugins as normal
localVue.use(BootstrapVue)

// pass the `localVue` to the mount options
mount(Component, {
  localVue
})

Then your components should be registered properly-