Vitest错误“TypeError：无法读取未定义的属性（读取'resolve'）”（router.resolve）

我有一个非常基本的测试，但是当我尝试安装组件时它会抛出以下错误const wrapper = mount(HomeHeader)。我已经粘贴了我的 vite 配置、测试、组件和包。

这个错误发生时没有更新我的 vite 配置，但我继续更新了配置test: { globals: true, }所以我不必导入test and expect.

完全错误

stderr | src/components/home/__tests__/HomeHeader.test.js > HomeHeader renders properly
[Vue warn]: injection "Symbol([vue-router]: router)" not found.
  at <RouterLink to="/" >
  at <HomeHeader ref="VTU_COMPONENT" >
  at <VTUROOT>
[Vue warn]: injection "Symbol([vue-router]: route location)" not found.
  at <RouterLink to="/" >
  at <HomeHeader ref="VTU_COMPONENT" >
  at <VTUROOT>
[Vue warn]: Unhandled error during execution of setup function
  at <RouterLink to="/" >
  at <HomeHeader ref="VTU_COMPONENT" >
  at <VTUROOT>

FAIL  src/components/home/__tests__/HomeHeader.spec.js > HomeHeader > renders properly
TypeError: Cannot read properties of undefined (reading 'resolve')
 ❯ ReactiveEffect.fn node_modules/vue-router/dist/vue-router.cjs.js:2068:45
    2066|     const router = vue.inject(routerKey);
    2067|     const currentRoute = vue.inject(routeLocationKey);
    2068|     const route = vue.computed(() => router.resolve(vue.unref(props.to)));
       |                                             ^

维测试界面

维特配置

import { fileURLToPath, URL } from 'url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

// https://vitejs.dev/config/
export default defineConfig({
  test: {
    globals: true,
  },
  plugins: [vue(), vueJsx()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
})

My test

import { mount } from '@vue/test-utils'
import HomeHeader from '../HomeHeader.vue'

describe('HomeHeader', () => {
  it('renders properly', () => {
    // This breaks
    const wrapper = mount(HomeHeader)
    expect(wrapper.text()).toContain('MOONHOLDINGS.XYZ')
  })
})

被测试的组件

<script setup>
import { RouterLink } from 'vue-router'
import {
  MOON_XYZ,
  LOGIN,
  LOGIN_PATH,
  GET_STARTED,
  SIGN_UP_PATH,
} from '../../constants'
import PrimaryBtn from '@/components/partials/PrimaryBtn.vue'
</script>

<template>
  <main>
    <header>
      <h1>
        <RouterLink to="/">
          {{ MOON_XYZ }}
        </RouterLink>
      </h1>
      <nav>
        <RouterLink :to="LOGIN_PATH">{{ LOGIN }}</RouterLink>
        <PrimaryBtn :copy="GET_STARTED" :url="SIGN_UP_PATH" />
      </nav>
    </header>
  </main>
</template>

<style lang="scss" scoped>
h1 {
  margin: 1em;
  font-size: 1.375rem;
  color: #fff;
}

a {
  color: #fff;
  text-decoration: none;
}

nav {
  position: absolute;
  right: 2em;

  a {
    display: inline-block;
    padding: 0 1rem;
    font-size: 2em;
    text-decoration: none;
    color: #fff;
    transition: 0.4s;

    .router-link-exact-active {
      color: #fff;
    }

    .router-link-exact-active:hover {
      background-color: transparent;
    }

    &:hover {
      text-decoration: underline;
    }

    &:first-of-type {
      border: 0;
    }
  }
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }
}
</style>

脚本命令"coverage": "vitest run --coverage",

我的依赖

"dependencies": {
  "animate.css": "^4.1.1",
  "axios": "^0.27.2",
  "pinia": "^2.0.14",
  "vue": "^3.2.36",
  "vue-router": "^4.0.15"
},
"devDependencies": {
  "@rushstack/eslint-patch": "^1.1.0",
  "@vitejs/plugin-vue": "^2.3.3",
  "@vitejs/plugin-vue-jsx": "^1.3.10",
  "@vitest/ui": "^0.20.3",
  "@vue/eslint-config-prettier": "^7.0.0",
  "@vue/test-utils": "^2.0.2",
  "c8": "^7.11.3",
  "eslint": "^8.5.0",
  "eslint-plugin-vue": "^9.0.0",
  "happy-dom": "^6.0.4",
  "jsdom": "^19.0.0",
  "npm-run-all": "^4.1.5",
  "prettier": "^2.5.1",
  "ramda": "^0.28.0",
  "sass": "^1.53.0",
  "start-server-and-test": "^1.14.0",
  "vite": "^2.9.9",
  "vitest": "^0.20.3",
  "vue-tsc": "^0.35.2"
}

有人在使用 Vitest 时遇到过这个问题吗？

Vue Router 会自动模拟，因此无法从中调用任何方法。这就是您调用时出错的原因resolve().

正确的测试应该是这样的：

import { vi } from 'vitest';
import { mount } from '@vue/test-utils'
import HomeHeader from '../HomeHeader.vue'

// you need to mock router
vi.mock('vue-router', () => ({
  resolve: vi.fn(),
}));

describe('HomeHeader', () => {
  it('renders properly', () => {
    const wrapper = mount(HomeHeader)
    expect(wrapper.text()).toContain('MOONHOLDINGS.XYZ')
  })
})