When testing a base button implementation using Jest and Vue-test-utils, the tests work but I am getting the following warning:
[Vue warn]: Unknown custom element: b-button - did you register the component correctly? 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.
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.
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. This localVue can be included when mounting the wrapper.
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:
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,
})