'Vue Js 3 error unit test when using gettter
I am just explore about unit test in vue 3,I just added simple test unit, and when I run it, i got error but when i run the app its work properly. the message error is :
TypeError: Cannot read properties of undefined (reading 'getters')
this is my test code TheHeader.spec.ts :
import { mount } from '@vue/test-utils'
import TheHeader from '../src/components/layout/TheHeader.vue'
describe('header components', () => {
it('get nav', () => {
const wraper = mount(TheHeader)
expect(wraper.text()).toMatch('Home')
})
})
and this is my component which i test TheHeader.vue:
<template>
<header class="w-full px-28 flex justify-between bg-gray-900 items-center backdrop-opacity-10 py-5">
<img src="../../assets/logo.png" class="h-10 w-10">
<nav>
<ul class="flex text-white">
<li class="mr-2">
<router-link class="font-bold" to="/">Home</router-link>
</li>
<li class="mr-2">
<router-link class="font-bold" to="/suggestme">Suggest me</router-link>
</li>
<li class="mr-2" v-if="!user.name">
<router-link class="font-bold" to="/login">Login</router-link>
</li>
<li class="mr-2" v-else>
<router-link class="font-bold" to="/dashboard">Dashboard</router-link>
</li>
</ul>
</nav>
</header>
</template>
<script lang="ts">
import {computed} from 'vue';
import {useStore} from 'vuex';
export default{
setup(){
const store = useStore();
const user = computed(function(){
return store.getters['user']
})
return{user}
}
}
</script>
and it is my jest configuration in package.json :
"jest": {
"moduleFileExtensions": [
"js",
"ts",
"json",
"vue"
],
"transform": {
"^.+\\.tsx?$": "ts-jest",
".*\\.(vue)$": "vue-jest",
"\\.(jpg|jpeg|png|gif|webp|svg)$": "jest-transform-file"
},
"testURL": "http://localhost/",
"testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
"moduleNameMapper": {
"^@/(.*)$": "<rootDir>/src/$1"
}
}
I think the error is in my component because when I test in another component which not have a getter method is not getting an error. i hope someone can explain me thank you
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
