Soy nuevo en Unit Testing con vue. Estoy tratando de realizar una prueba unitaria de un componente de navegación vue. Empecé fácil, solo quería probar un método que solo hace que un booleano sea falso (activado por un clic). También estoy usando vuetify. De alguna manera logré imitar un botón y luego mi esperanza es que la variable que estoy pasando (showLoginDrawer) devuelva falso en mi prueba unitaria. Mi error es TypeError: _vm.is.has no es una función relacionada con una parte diferente de mi código, creo que me estoy perdiendo algo, pero no pude encontrar nada en línea al respecto.
A continuación, he incluido el componente y mi archivo de prueba.
//Nav.vue <template> <v-btn :to="{ name: 'home' }" aria-label="Home button" @click="hideDiv()" > </v-btn> <div> <transition name="nav-fade"> <component v-bind:is="drawerSection"></component> </transition> </div> </template> <script> data() { return { drawerSection: function () { if (this.is.has('learning')) { return 'nav-learning' } else { return 'nav-explore' } }, } }, methods: { hideDiv() { if (!this.appState.restrictedAccessAlert) this.appState.showLoginDrawer = false } } </script> <style>//disregard</style> //Nav.spec.js import Vue from 'vue' import Vuex from 'vuex' import Vuetify from 'vuetify' import { shallowMount, mount } from '@vue/test-utils' import Nav from '@/components/Nav' const localVue = createLocalVue() localVue.use(Vuetify) localVue.use(Vuex) describe('Testing Nav component', () => { let vuetify beforeEach(() => { vuetify = new Vuetify() }) test('Test Button click when logged out', () => { const wrapper = mount(Navigation, { data() { return { appState: { showLoginDrawer: true, lastCapabilityPath: '', restrictedAccessAlert: false, }, is: 'learning', localVue, vuetify, } }, }) const event = jest.fn() const button = wrapper.findAll('.v-btn').at(0) expect(button.text()).toContain('My Profile') button.vm.$on('click', event) expect(event).toHaveBeenCalledTimes(0) expect(wrapper.vm.showLoginDrawer).toBeTruthy() button.trigger('click') expect(event).toHaveBeenCalledTimes(1) expect(wrapper.vm.showLoginDrawer).toBeFalsy() }) })me sale el error:
TypeError: _vm.is.has is not a function
¡Gracias por cualquier ayuda!
Oh, mi error fue que has() es una función establecida, por lo que no funcionará con una cadena, así que tuve que hacerla igual a un conjunto.
Código actualizado:
test('Test Basic HTML rendering', () => { const is = new Set(['learning', 'b', 'c']) const wrapper = mount(Navigation, { data() { return { appState: { showLoginDrawer: true, lastCapabilityPath: '', restrictedAccessAlert: false, }, is, localVue, vuetify, } }, }) wrapper.vm.$vuetify.breakpoint.smAndUp = true expect(wrapper.html()).toContain('Log-in') // check the name of the component expect(wrapper.vm.$options.name).toMatch('NavProfile') })Intente usar async & await , tal vez cada llamada de evento sea asíncrona
describe('Testing Nav component', () => { let vuetify beforeEach(() => { vuetify = new Vuetify() }) test('Test Button click when logged out', async () => { // use async const wrapper = mount(Navigation, { data() { return { appState: { showLoginDrawer: true, lastCapabilityPath: '', restrictedAccessAlert: false, }, is: 'learning', localVue, vuetify, } }, }) const event = jest.fn() const button = wrapper.findAll('.v-btn').at(0) expect(button.text()).toContain('My Profile') button.vm.$on('click', event) expect(event).toHaveBeenCalledTimes(0) expect(wrapper.vm.showLoginDrawer).toBeTruthy() // Try use await at every event await button.trigger('click') expect(event).toHaveBeenCalledTimes(1) expect(wrapper.vm.showLoginDrawer).toBeFalsy() }) })