CODEWITHSUNDEEP
vue.jsjestjsnuxt.jsbootstrap-vuevue-test-utils
Baldvin Bui
Baldvin Bui

Reputation: 73

Vue Test Util can't find BootstrapVue html elements in Nuxt.js

I have a project in Nuxt.js and I am trying to test it using Vue Test Util which works effectively except on files where I use BootstrapVue custom html elements.

When I run npm test this error displays for every BootsrapVue html element.

 console.error
      [Vue warn]: Unknown custom element: <b-container> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
      
      found in
      
      ---> <Anonymous>
             <Root>

How can I prevent this?

Upvotes: 1

Views: 382

Answers (1)

tony19
tony19

Reputation: 138526

You need to setup bootstrap-vue in your Jest enviroment, using a Jest setup file.

Create the setup file:

// @/jest-setup.js
import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)
Vue.use(IconsPlugin)

Then configure Jest's setupFiles to load it:

// @/jest.config.js
module.exports = {
  setupFiles: ['./jest-setup.js'],
}

Upvotes: 1

Related Questions