{"id":678,"hash":"bc6eee19aa30d69dd6809ab1dd4ba67a94d187fef1d947b084465a87bc52cd82","pattern":"Vitest error &quot;TypeError: Cannot read properties of undefined (reading &#39;resolve&#39;)&quot; (router.resolve)","full_message":"I have a very basic test, however it throws the error below when I try to mount a component const wrapper = mount(HomeHeader). I've pasted my vite config, test, component and packages.\n\nThis error happened without updating my vite config, but I went ahead and updated the config with test: { globals: true, } so I don't have to import test and expect.\n\nFull error\n\nstderr | src/components/home/__tests__/HomeHeader.test.js > HomeHeader renders properly\n[Vue warn]: injection \"Symbol([vue-router]: router)\" not found.\n  at <RouterLink to=\"/\" >\n  at <HomeHeader ref=\"VTU_COMPONENT\" >\n  at <VTUROOT>\n[Vue warn]: injection \"Symbol([vue-router]: route location)\" not found.\n  at <RouterLink to=\"/\" >\n  at <HomeHeader ref=\"VTU_COMPONENT\" >\n  at <VTUROOT>\n[Vue warn]: Unhandled error during execution of setup function\n  at <RouterLink to=\"/\" >\n  at <HomeHeader ref=\"VTU_COMPONENT\" >\n  at <VTUROOT>\n\nFAIL  src/components/home/__tests__/HomeHeader.spec.js > HomeHeader > renders properly\nTypeError: Cannot read properties of undefined (reading 'resolve')\n ❯ ReactiveEffect.fn node_modules/vue-router/dist/vue-router.cjs.js:2068:45\n    2066|     const router = vue.inject(routerKey);\n    2067|     const currentRoute = vue.inject(routeLocationKey);\n    2068|     const route = vue.computed(() => router.resolve(vue.unref(props.to)));\n       |                                             ^\n\nVitest UI\n\nVite Config\n\nimport { fileURLToPath, URL } from 'url'\nimport { defineConfig } from 'vite'\nimport vue from '@vitejs/plugin-vue'\nimport vueJsx from '@vitejs/plugin-vue-jsx'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n  test: {\n    globals: true,\n  },\n  plugins: [vue(), vueJsx()],\n  resolve: {\n    alias: {\n      '@': fileURLToPath(new URL('./src', import.meta.url)),\n    },\n  },\n})\n\nMy test\n\nimport { mount } from '@vue/test-utils'\nimport HomeHeader from '../HomeHeader.vue'\n\ndescribe('HomeHeader', () => {\n  it('renders properly', () => {\n    // This breaks\n    const wrapper = mount(HomeHeader)\n    expect(wrapper.text()).toContain('MOONHOLDINGS.XYZ')\n  })\n})\n\nThe component being tested\n\n<script setup>\nimport { RouterLink } from 'vue-router'\nimport {\n  MOON_XYZ,\n  LOGIN,\n  LOGIN_PATH,\n  GET_STARTED,\n  SIGN_UP_PATH,\n} from '../../constants'\nimport PrimaryBtn from '@/components/partials/PrimaryBtn.vue'\n</script>\n\n<template>\n  <main>\n    <header>\n      <h1>\n        <RouterLink to=\"/\">\n          {{ MOON_XYZ }}\n        </RouterLink>\n      </h1>\n      <nav>\n        <RouterLink :to=\"LOGIN_PATH\">{{ LOGIN }}</RouterLink>\n        <PrimaryBtn :copy=\"GET_STARTED\" :url=\"SIGN_UP_PATH\" />\n      </nav>\n    </header>\n  </main>\n</template>\n\n<style lang=\"scss\" scoped>\nh1 {\n  margin: 1em;\n  font-size: 1.375rem;\n  color: #fff;\n}\n\na {\n  color: #fff;\n  text-decoration: none;\n}\n\nnav {\n  position: absolute;\n  right: 2em;\n\n  a {\n    display: inline-block;\n    padding: 0 1rem;\n    font-size: 2em;\n    text-decoration: none;\n    color: #fff;\n    transition: 0.4s;\n\n    .router-link-exact-active {\n      color: #fff;\n    }\n\n    .router-link-exact-active:hover {\n      background-color: transparent;\n    }\n\n    &:hover {\n      text-decoration: underline;\n    }\n\n    &:first-of-type {\n      border: 0;\n    }\n  }\n}\n\n@media (min-width: 1024px) {\n  header {\n    display: flex;\n    place-items: center;\n    padding-right: calc(var(--section-gap) / 2);\n  }\n}\n</style>\n\nScript command \"coverage\": \"vitest run --coverage\",\n\nMy dependencies\n\n\"dependencies\": {\n  \"animate.css\": \"^4.1.1\",\n  \"axios\": \"^0.27.2\",\n  \"pinia\": \"^2.0.14\",\n  \"vue\": \"^3.2.36\",\n  \"vue-router\": \"^4.0.15\"\n},\n\"devDependencies\": {\n  \"@rushstack/eslint-patch\": \"^1.1.0\",\n  \"@vitejs/plugin-vue\": \"^2.3.3\",\n  \"@vitejs/plugin-vue-jsx\": \"^1.3.10\",\n  \"@vitest/ui\": \"^0.20.3\",\n  \"@vue/eslint-config-prettier\": \"^7.0.0\",\n  \"@vue/test-utils\": \"^2.0.2\",\n  \"c8\": \"^7.11.3\",\n  \"eslint\": \"^8.5.0\",\n  \"eslint-plugin-vue\": \"^9.0.0\",\n  \"happy-dom\": \"^6.0.4\",\n  \"jsdom\": \"^19.0.0\",\n  \"npm-run-all\": \"^4.1.5\",\n  \"prettier\": \"^2.5.1\",\n  \"ramda\": \"^0.28.0\",\n  \"sass\": \"^1.53.0\",\n  \"start-server-and-test\": \"^1.14.0\",\n  \"vite\": \"^2.9.9\",\n  \"vitest\": \"^0.20.3\",\n  \"vue-tsc\": \"^0.35.2\"\n}\n\nAnyone else run into this before while using Vitest?","ecosystem":"npm","package_name":"unit-testing","package_version":null,"solution":"Vue Router is automatically mocked and because of that, no methods can be called from it. That's the reason why you are getting errors on calling resolve().\n\nCorrect test should look like this:\n\nimport { vi } from 'vitest';\nimport { mount } from '@vue/test-utils'\nimport HomeHeader from '../HomeHeader.vue'\n\n// you need to mock router\nvi.mock('vue-router', () => ({\n  resolve: vi.fn(),\n}));\n\ndescribe('HomeHeader', () => {\n  it('renders properly', () => {\n    const wrapper = mount(HomeHeader)\n    expect(wrapper.text()).toContain('MOONHOLDINGS.XYZ')\n  })\n})","confidence":0.8,"source":"stackoverflow","source_url":"https://stackoverflow.com/questions/72925954/vitest-error-typeerror-cannot-read-properties-of-undefined-reading-resolve","votes":8,"created_at":"2026-04-19T04:51:28.856741+00:00","updated_at":"2026-04-19T04:51:28.856741+00:00"}