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

Question

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?

tony19 · Accepted Answer · 2021-02-26 00:04:37Z

1

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'],
}

edited Feb 26, 2021 at 0:04

answered Feb 25, 2021 at 16:38

tony19

140k23 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Baldvin Bui Over a year ago

Well since this is a Nuxt project I don't have a main.js file, is there a way to solve this without it?

tony19 Over a year ago

Ok, then you'd still need to setup bootstrap-vue in your Jest environment, and the same steps would apply other than having to edit main.js.

Baldvin Bui Over a year ago

tony19 Over a year ago

That implies you don't have Babel setup properly for Jest. You could workaroudn that by replacing import with require statements (e.g., import Vue from 'vue' becomes const Vue = require('vue')).

Loga Thrim Over a year ago

It works! In my case using Cypress to test components. But bootstrap components not rendering, I added this code to cypress/support which can work, thanks a lot.

Collectives™ on Stack Overflow

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

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related