Al probar la implementación de un botón base con Jest y Vue-test-utils, las pruebas funcionan, pero recibo la siguiente advertencia:
[Advertencia de Vue]: elemento personalizado desconocido: botón b: ¿registró el componente correctamente? Para componentes recursivos, asegúrese de proporcionar la opción "nombre".
Confío en que no estoy incluyendo correctamente las dependencias del complemento Buefy y no tengo mucha experiencia aquí. Aquí está mi componente de archivo único para el botón base:
<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>Y aquí está mi prueba:
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) }) }) Agradecería que me ayudaran a comprender la forma adecuada de incluir el componente b-button Buefy en la prueba.
Para incluir el complemento Buefy (o cualquier otro complemento), puede usar algo como const localVue = createLocalVue() de vue-test-utils para crear un vue local y usar el complemento Buefy, localVue.use(Buefy) como se muestra a continuación. Este localVue se puede incluir al montar el envoltorio.
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, }) Si solo tiene uno o dos componentes que desea usar del complemento, puede importar los componentes individuales y ejecutar localVue.use varias veces como tal:
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, })