用 bootstrap-vue 运行 jest

Posted 2023-02-16

【中文标题】用 bootstrap-vue 运行 jest

【英文标题】：Running jest with bootstrap-vue

【发布时间】：2019-01-03 07:32:27

【问题描述】：

我最近一直在使用 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)'
 ]

【参考方案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
)

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

【讨论】：

它仍然显示警告[BootstrapVue warn]: tooltip unable to find target element in document

我面临同样的问题，即使像这样全局安装 BootstrapVue 插件 localVue.use(BootstrapVue) 测试运行也会在控制台中打印警告“未知自定义元素： - 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。如何解决？ @BartusZak

它仍然向我显示警告。我没有找到任何解决方案:(

@BartusZak 在 mount 上对 bootstrap vue 组件进行存根解决了这个问题.. 控制台中没有警告。

设置BOOTSTRAP_VUE_NO_WARN 禁用警告。

【参考方案2】：

也可以像

这样存根组件

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

【讨论】：

谢谢！它有点工作，我有 64 个“错误”，只剩下 40 个，其中一些是 b-cols 或 b-rows。我稍后再查。

【参考方案3】：

扩展 chrismarx 答案。

这是一个在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()
  )
)

【参考方案4】：

我发现在每个测试中导入 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;

【参考方案5】：

对此有两种选择。 首先，如果您使用localVue 实例，您必须使用此localVue.component("b-breadcrumb", BBreadcrumb) 将您的bootstrap-vue 组件注册为全局对象

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

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

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

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

有一个重要的问题是如果你使用localVue instance components 的 mount 方法选项将不起作用。

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

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

更多关于mounthere选项的信息