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

Posted 2023-02-22

【中文标题】Vue Test Util 在 Nuxt.js 中找不到 BootstrapVue html 元素

【英文标题】：Vue Test Util can't find BootstrapVue html elements in Nuxt.js

【发布时间】：2021-05-27 23:41:24

【问题描述】：

我在 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>

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

【参考方案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'],

【讨论】：

好吧，既然这是一个 Nuxt 项目，我没有 main.js 文件，没有它有没有办法解决这个问题？

好的，那么您仍然需要在您的 Jest 环境中设置 bootstrap-vue，并且除了必须编辑 main.js 之外，还需要执行相同的步骤。

然后我得到这个错误： SyntaxError: Unexpected token ':' 5 |导入'bootstrap-vue/dist/bootstrap-vue.css' 6 | > 7 | Vue.use(BootstrapVue) | ^ 8 | Vue.use(IconsPlugin) 9 | 10 |在 Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14) 在 Object. (jest-setup.js:7:1)

这意味着您没有为 Jest 正确设置 Babel。您可以通过用require 语句替换import 来解决这个问题（例如，import Vue from 'vue' 变为const Vue = require('vue')）。