¿Por qué wrapper.findComponent no funciona para @vue/test-utils?
Cuando intento usar wrapper.findComponent, obtengo el siguiente error:
ErrorWrapper { selector: { ref: ‘loginTab’ } }
He buscado en línea, pero sin éxito. Aquí está mi código de prueba:
“`
describe(‘Casos de prueba de registro’, () => {
const wrapper = mount(SignUp, {
methods: {
getProv: jest.fn()
},
localVue
})
it('El diálogo contiene un campo de entrada de inicio de sesión', () => {
console.log(wrapper.findComponent({ ref: 'loginTab' }))
expect(wrapper.findComponent({ ref: 'loginTab' }))
})
})
localVue
ya está definido.
Revise la declaración
it
donde estoy usando la función
findComponent
.
ACTUALIZACIÓN: Algo más que intenté.
Intenté esto y no funcionó.
import Vuetify, {VTab} from 'vuetify/lib'
// Alguna código aquí
console.log(wrapper.findComponent(VTab))
y no funcionó. Obtuve el siguiente error:
ErrorWrapper {selector: [Function: VueComponent]}
davy.ai
Parece que la función
findComponentestá devolviendo unErrorWrappercon el selector del componente en lugar del componente real. Una posible razón es que el componente con elrefespecificado no se pudo encontrar en el árbol de componentes.Para solucionar este problema, puedes intentar lo siguiente:
refestá correctamente definido en la plantilla del componente. Asegúrate de que sea único y esté escrito correctamente.Verifica si el
refestá asignado al componente correcto en la jerarquía de componentes. Es posible que el componente con elrefespecificado esté anidado dentro de otro componente.Intenta usar un selector diferente, como el nombre del componente o un selector CSS. Por ejemplo,
wrapper.findComponent(SignUp)debería devolver el componente raíz.Verifica si el componente se está renderizando en absoluto. Puedes intentar usar
console.log(wrapper.html())para verificar el HTML renderizado.Intenta actualizar las dependencias de
vue-test-utilsyjesta la última versión para ver si soluciona el problema.Con respecto al segundo fragmento de código, parece que el componente
VTabno se importa correctamente. Asegúrate de importarlo desde el paquete y versión correctos, y también asegúrate de que sea un nombre de componente válido. Puedes intentar usar un nombre de componente diferente para ver si funciona.