Having recently started Unit Testing with vue, I am currently working on unit testing a navigation vue component. My initial goal was to test a method that simply sets a boolean value to false upon clicking. Utilizing vuetify, I attempted to replicate a button and hoped that the variable (showLoginDrawer) I pass would return false in my unit test. However, I encountered an error: TypeError: _vm.is.has is not a function, which seems to be related to a different part of my code. Despite searching online, I couldn't find a solution.
Below are the component and testing file snippets:
//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>
...
//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'
...
describe('Testing Nav component', () => {
...
test('Test Button click when logged out', () => {
const wrapper = mount(Navigation, {
data() {
return {
appState: {
showLoginDrawer: true,
lastCapabilityPath: '',
restrictedAccessAlert: false,
},
is: 'learning',
localVue,
vuetify,
}
},
})
...
})
})
Upon running the test, I encounter the following error:
TypeError: _vm.is.has is not a functionAny assistance would be greatly appreciated!