用Bootstrap-Vue玩笑 [英] Running jest with bootstrap-vue

问题描述

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

I've been working with vuejs and bootstrap-vue lately. Decided to add unit testing to my project.

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

I'm not realy familiar with unit testing so I'm trying anything I could find to understand how it works.

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>

测试一切正常. 但是我发现了这些缺陷，并且可以找到一种方法来进行实际修复.

Everything seems ok with the test. But I got these wannings and could find a way to actualy fix it.

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

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

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

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

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

So I looked around and it seems like I need to add these child components to the father.

这是这些组件的文档.

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

I'm also adding my config files (There're the same as the vue-cli 3 generates them)

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

推荐答案

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

If you're adding bootstrap vue as a global plugin:

Vue.use(BootstrapVue);

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

Then in your tests, you're likely going to want to follow this tip:

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

其中概述了如何使用createLocalVue()并使用与应用程序相同的全局配置对其进行设置:

Which outlines how you can use the createLocalVue() and set it up with the same global config as your app:

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

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

Then your components should be registered properly-

这篇关于用Bootstrap-Vue玩笑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！