运行与 bootstrap-vue

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 warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

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

这是这些组件的 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/'
 },
 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

也可以像

这样的存根组件

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

Answer 2

如果您要添加 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 3

对此有两种选择。首先，如果你使用 localVue 实例，你必须使用这个 localVue.component("b-breadcrumb", BBreadcrumb)

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

I will mention to b-breadcrumb as if it any part of boostrap-vue's components.

const localVue = createLocalVue()
localVue.component("b-breadcrumb", BBreadcrumb)
mount(CustomComponent, {
  // Some options
})

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

mount(CustomComponent, {
  // Some options
  components: {
    BBreadcrumb
  },
})

There is a important issue that If you use localVue instance components option of mount method will not work.

您也可以忽略任何 bootstrap-vue 组件以避免使用挂载方法的 stubs 选项进行不必要的渲染。

mount(CustomComponent, {
  stubs: ["b-breadcrumb"]
})

关于挂载选项的更多信息here

Answer 4

扩展答案。

这是 vue/nuxt 应用程序中使用 bootstrap-vue 的示例。在测试包含来自 bootstrap-vue 的一些元素的组件 FormInput.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 5

我发现在每次测试中导入 boostrap-vue 的所有组件效率非常低。

您可以添加一个包含所有导入的文件并添加到 jest 配置文件中

jest.config.js

...
setupFiles: ['./jest/loadConfig.js'],
...

loadConfig.js

import Vue from 'vue';
import GlobalComponents from './plugins/globalComponents';
import BootstrapVue from 'bootstrap-vue';
Vue.use(BootstrapVue);
Vue.use(GlobalComponents);

并结束全局组件的插件

globalComponents.js

import { BRow, BCol } from 'bootstrap-vue'

const GlobalComponents = {
  install(Vue) {
    Vue.component('b-row', BRow);
    Vue.component('b-col', BCol);
  }
};

export default GlobalComponents;

运行与 bootstrap-vue

Running jest with bootstrap-vue

javascript

jestjs

vuejs2

vue-cli

bootstrap-vue

运行 与 bootstrap-vue

Running jest with bootstrap-vue

javascript

jestjs

vuejs2

vue-cli

bootstrap-vue

运行与 bootstrap-vue