Javascript 使用bootstrap vue运行jest

我最近一直在和vuejs合作。 决定将单元测试添加到我的项目中

我对单元测试不是很熟悉，所以我正在尝试我能找到的任何东西来理解它是如何工作的

Login.specs.js

Login.vue

{{$t（'login.connection'）}

考试似乎一切顺利。 但我有这些想法，我可以找到一种方法来解决它

[Vue warn]：未知自定义元素：-您是否正确注册了组件？对于递归组件，请确保提供“name”选项

[Vue warn]：未知自定义元素：-您是否正确注册了组件？对于递归组件，请确保提供“name”选项

所以我环顾四周，似乎我需要将这些子组件添加到父组件中

下面是这些组件的详细信息

我还添加了我的配置文件（与vue cli 3生成的配置文件相同）

jest.congif.js

module.exports={
moduleFileExtensions：[
"js",，
“jsx”，
“json”，
“vue”
],
转换：{
“^.+\\.vue$”：“vue jest”，
“.+\（css | styl | less | sass | scss | png | jpg | ttf | woff | woff2）$”：“jest-transform存根”，
“^.+\\.jsx？$”：“巴贝尔笑话”
},
模块映射：{
“^@/（.*）$”：“/src/$1”
},
快照序列化程序：[
“jest serializer vue”
],
testPathIgnorePatterns:[//我已经添加了这个，不确定是否有用
“/node_模块”
],
测试匹配：[
“**/tests/unit/**.spec.（js | jsx | ts | tsx）|**/u测试/**.（js | jsx | ts | tsx）”
]
}

也可以存根组件，如

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

---

如果要将引导vue添加为全局插件：

Vue.use(BootstrapVue);

然后在测试中，您可能希望遵循以下提示：

它概述了如何使用

createLocalVue（）

并将其设置为与应用程序相同的全局配置：

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
})

---

然后您的组件应该正确注册-

有两个选项。 首先，如果使用

localVue

实例，则必须使用该

localVue.component（“b-breadcrumb”，BBreadcrumb）”将引导vue组件注册为全局对象

我将提到
b-breadcrumb
，就好像它是boostrap vue组件的任何一部分一样

const localVue=createLocalVue（）
localVue.component（“b-breadcrumb”，BBreadcrumb）
安装（自定义）组件{
//一些选择
})

其次，如果您不使用
localVue
实例，您可以像下面这样将该组件注册为mount方法的参数

mount（自定义组件、{
//一些选择
组成部分：{
面包屑
},
})

有一个重要的问题是，如果使用mount方法的
localVue
instance components选项将无法工作

您还可以忽略任何引导vue组件，以避免使用mount method的
stubs
选项进行不必要的渲染

mount（自定义组件、{
存根：[“b-面包屑”]
})

有关安装选项的更多信息，请在回答时展开

下面是使用
bootstrap vue
的
vue/nuxt
应用程序中使用的示例。在测试我的组件
FormInput.vue
时，我遇到了一些错误，比如
未知自定义元素：
和
未知自定义元素：
和
未知自定义元素：

显示使用插槽和自定义组件的示例。为了克服我的错误，我做了以下几点。注意
bootstrap vue
导入和
stubs
部分：

import { /* mount, */ shallowMount } from '@vue/test-utils'
import { BRow, BCol, BFormInput } from 'bootstrap-vue'
import FormInput from './FormInput.vue'

describe('FormInput test', () => {
  test('is a Vue instance', () => {
    const wrapper = shallowMount(FormInput, {
      stubs: {
        // used to register custom components
        'b-form-input': BFormInput,
        'b-row': BRow,
        'b-col': BCol,
      },
    })
    expect(wrapper.vm).toBeTruthy()
  })
})


非常感谢。这有点奏效，我有64个“错误”，只剩下40个，其中一些是b-cols或b-rows。我稍后会查看它。它仍然显示警告
[BootstrapVue warn]：工具提示在文档中找不到目标元素
我面临同样的问题，甚至在全局安装BootstrapVue插件（如此localVue）后。使用（BootstrapVue）测试运行会在控制台中打印警告“未知自定义元素：-您是否正确注册了组件？对于递归组件，请确保提供“name”选项。“如何修复它？”BartusZakIt仍会为我显示警告。我没有找到任何解决方案：（@BartusZak在装载时将引导vue组件存根解决了问题。控制台中没有警告。设置
引导vue\u NO\u WARN
以禁用警告。
Vue.use(BootstrapVue);

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
})

import { /* mount, */ shallowMount } from '@vue/test-utils'
import { BRow, BCol, BFormInput } from 'bootstrap-vue'
import FormInput from './FormInput.vue'

describe('FormInput test', () => {
  test('is a Vue instance', () => {
    const wrapper = shallowMount(FormInput, {
      stubs: {
        // used to register custom components
        'b-form-input': BFormInput,
        'b-row': BRow,
        'b-col': BCol,
      },
    })
    expect(wrapper.vm).toBeTruthy()
  })
})