'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