Vue Test Util 在 Nuxt.js 中找不到 BootstrapVue html 元素

Question

我在 Nuxt.js 中有一个项目，我正在尝试使用 Vue Test Util 对其进行测试，除了在我使用 BootstrapVue 自定义 html 元素的文件上之外，它可以有效地工作。

当我运行 npm test 时，每个 BootsrapVue html 元素都会显示此错误。

 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>

我怎样才能防止这种情况发生？

Answer 1

您需要使用 Jest 设置文件在您的 Jest 环境中设置 bootstrap-vue。

创建设置文件：

// @/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)

然后配置Jest's setupFiles来加载它：

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