[英]How to import/include plugin in testing with Jest / Vue-test-utils?
When testing a base button implementation using Jest and Vue-test-utils, the tests work but I am getting the following warning:使用 Jest 和 Vue-test-utils 测试基本按钮实现时,测试有效,但我收到以下警告:
[Vue warn]: Unknown custom element: b-button - did you register the component correctly? [Vue 警告]:未知自定义元素:b 按钮 - 您是否正确注册了组件? For recursive components, make sure to provide the "name" option.对于递归组件,请确保提供“名称”选项。
I am confident is because I am not including the Buefy
plugin dependencies correctly, and I don't have a lot of experience here.我有信心是因为我没有正确地包含Buefy
插件依赖项,而且我在这里没有太多经验。 Here is my single file component for the base button:这是我的基本按钮的单个文件组件:
<template>
<b-button data-testid="base-button" @click="$emit('click')">
{{ buttonLabel }}
</b-button>
</template>
<script>
export default {
props: {
buttonLabel: {
type: String,
default: 'Button',
},
},
}
</script>
<style></style>
And here is my testing:这是我的测试:
import { mount } from '@vue/test-utils'
import BaseButton from '@/components/base/BaseButton'
const Component = BaseButton
const ComponentName = 'BaseButton'
const global_wrapper = mount(Component, {})
describe(ComponentName, () => {
it('should render the button', () => {
const wrapper = global_wrapper
const button = wrapper.find('[data-testid="base-button"]')
expect(button.exists()).toBeTruthy()
}),
it('should emit the click event on a click', async () => {
const wrapper = global_wrapper
console.log(wrapper.html())
const button = wrapper.find('[data-testid="base-button"]')
button.trigger('click')
const clickCalls = wrapper.emitted('click')
expect(clickCalls).toHaveLength(1)
})
})
I would appreciate help understanding the appropriate way to include the Buefy b-button
component in the test.我将不胜感激帮助理解在测试中包含 Buefy b-button
组件的适当方法。
Posting for a Vue 3 solution.发布 Vue 3 解决方案。 As StevenSiebert mentioned, createLocalVue
is no longer available with v2 @vue/test-utils
(needed for Vue 3 tests).正如StevenSiebert提到的, createLocalVue
不再适用于 v2 @vue/test-utils
(Vue 3 测试需要)。 You'll need to use the global
object in your tests.您需要在测试中使用global
对象。
Per the docs for mount
, to register the plugin for one-off mounts, you can use:根据mount
的文档,要为一次性安装注册插件,您可以使用:
import foo from 'foo'
mount(Component, {
global: {
plugins: [foo]
}
})
To register the plugin in all tests, you can add to your test setup file, ie setup.js
.要在所有测试中注册插件,您可以添加到您的测试设置文件,即setup.js
。 See docs查看文档
import foo from 'foo'
config.global.plugins = [foo]
To include the Buefy plugin (or any other plugin), you can use something like const localVue = createLocalVue()
from vue-test-utils to create a local vue and use the Buefy plugin, localVue.use(Buefy)
as below.要包含 Buefy 插件(或任何其他插件),您可以使用 vue-test-utils 中的const localVue = createLocalVue()
类的东西来创建本地 vue 并使用 Buefy 插件localVue.use(Buefy)
,如下所示。 This localVue
can be included when mounting the wrapper.安装包装器时可以包含这个localVue
。
import { createLocalVue, mount } from '@vue/test-utils'
import Component from '../Component'
import Buefy from 'buefy'
const localVue = createLocalVue()
localVue.use(Buefy)
const global_wrapper = mount(Component, {
localVue,
})
If you only have one or two components you want to use from the plugin, you can import the individual components and run localVue.use
multiple times as such:如果您只想从插件中使用一两个组件,则可以导入各个组件并多次运行localVue.use
,如下所示:
import { createLocalVue, mount } from '@vue/test-utils'
import Component from '../Component'
import { Button, Checkbox } from 'buefy'
const localVue = createLocalVue()
localVue.use(Button)
localVue.use(Checkbox)
const global_wrapper = mount(Component, {
localVue,
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.