Question

我最近一直在使用vuejs和bootstrap-vue。决定将单元测试添加到我的项目中。

我对单元测试不是很熟悉，所以我正在尝试一切可以理解的工作方式。

Login.specs.js

import { shallowMount, mount } from '@vue/test-utils'
import Login from '@/components/auth/Login.vue'

describe('Login.vue', () => {
  it('is a Vue instance', () => {
   const wrapper = mount(Login, {
    mocks: {
     $t: () => 'Connexion' // i18N
    }
   })
  const h2 = wrapper.find('h2')
  expect(h2.text()).toBe('Connexion')
 })
})

Login.vue

<b-row align-h="center">
 <b-col class="text-center">
  <h2>{{ $t('login.connection') }}</h2>
 </b-col>
</b-row>

测试一切正常。但是我发现了这些缺陷，可以找到一种方法来解决它。

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

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

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

这是这些组件的documentation。

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

jest.congif.js

module.exports = {
  moduleFileExtensions: [
  'js',
  'jsx',
  'json',
  'vue'
 ],
 transform: {
  '^.+\\.vue$': 'vue-jest',
  '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest- transform-stub',
  '^.+\\.jsx?$': 'babel-jest'
 },
 moduleNameMapper: {
  '^@/(.*)$': '<rootDir>/src/$1'
 },
 snapshotSerializers: [
  'jest-serializer-vue'
 ],
 testPathIgnorePatterns: [ //I've added this one, not sure if usefull
  '<rootDir>/node_modules'
 ],
 testMatch: [
  '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
 ]
}

Answer 1

如果您要添加bootstrap vue作为全局插件：

Vue.use(BootstrapVue);

然后在您的测试中，您可能需要遵循以下提示：

https://vue-test-utils.vuejs.org/guides/common-tips.html#applying-global-plugins-and-mixins

其中概述了如何使用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
})

那么您的组件应该正确注册-

Answer 2

也可以对

之类的组件进行存根处理

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

Answer 3

扩展 chrismarx 答案。

以下是在带有 vue/nuxt 的 bootstrap-vue 应用程序中使用的示例。在测试包含来自 FormInput.vue 的一些元素的组件 bootstrap-vue 时，我收到了诸如 Unknown custom element: <b-form-input> 和 Unknown custom element: <b-col> 以及 Unknown custom element: <b-row>

之类的错误

Doc 显示使用插槽和自定义组件的示例。我做了以下事情来克服我的错误。请注意 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()
  })
})

Answer 4

由于这些错误并未阻碍开发或测试过程，因此我仅添加了--silent标志。

这只会隐藏错误，而不是解决方案。

Answer 5

有两个选项。首先，如果使用for (int i = 0; i < 1000; i++) { Console.Write("\r" + i); Thread.Sleep(100); }实例，则必须使用此localVue

将bootstrap-vue组件注册为全局对象

我会提到localVue.component("b-breadcrumb", BBreadcrumb)，好像它是boostrap-vue组件的任何部分一样。

b-breadcrumb

第二，如果您不使用const localVue = createLocalVue() localVue.component("b-breadcrumb", BBreadcrumb) mount(CustomComponent, { // Some options })实例，可以将此组件注册为此类安装方法的参数

localVue

一个重要的问题是，如果您使用mount(CustomComponent, { // Some options components: { BBreadcrumb }, })实例组件，则mount方法的选项将不起作用。

此外，您可以忽略任何bootstrap-vue组件，以免使用mount方法的localVue选项进行不必要的渲染。

stubs

有关装载here的选项的更多信息

用Bootstrap-Vue玩笑

5 个答案: