使用 bootstrap-vue 运行 jest [英] 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 运行 jest的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!