Vitest - @src 文件夹别名未在测试文件中解析答案

【问题标题】：Vitest - @ src folder alias not resolved in test filesVitest - @src 文件夹别名未在测试文件中解析
【发布时间】：2022-07-18 01:43:39
【问题描述】：

按照 Vue.js 文档中的建议，我有一个使用 Vite/Vitest 的 vue3 项目。

这是项目的结构：

src
  components
    // my Vue components here, potentially in sub-folders. For example:
    HelloWorld.vue 
  router
    index.ts
  App.vue
  main.ts
vitest
  components
    // My test specs. For example:
    HelloWorld.spec.ts
// ...
tsconfig.app.json
tsconfig.json
tsconfig.vite-config.json
tsconfig.vitest.json
vite.config.ts

src 文件夹的 @/ 别名已在组件文件中正确解析。但是，在我的测试文件中，出现错误：找不到模块。

例如在HelloWorld.spec.ts:

import HelloWorld from '@/components/HelloWorld.vue'; // <-- error !
import { describe, it } from 'vitest';

describe('HelloWorld', () => {
  it('should day hello', () => {
    // ...
  });
});

tsconfig.app.json

{
  "extends": "@vue/tsconfig/tsconfig.web.json",
  "include": [
    "env.d.ts",
    "src/**/*",
    "src/**/*.vue"
  ],
  "exclude": [
    "vitest/**/*"
  ],
  "compilerOptions": {
    "composite": true,
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    },
    "strict": true,
    "experimentalDecorators": true
  }
}

vite.config.js

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
  test: {
    include: ['./vitest/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
  },
});

【问题讨论】：

你可以先尝试用更标准化的方式在 vite.config.js 中构建别名：alias: { "@": "./src" }。如果它不起作用，或者如果你想保持相同的配置，我建议你发布一个reproducible project。
别名配置随着项目的初始化而来，使用npm init vue@latest。但我尝试了其他配置，但都没有工作。
是的 - 那么你应该给我们一个reproducible project，我怀疑是打字稿配置问题，或者你也有可能遇到了一个最近的问题，该问题需要之前至少构建一次项目设置test.include。
你也使用 vitest.config.js 文件吗？
不，我没有为 vitest 使用特定的配置文件

标签： typescript vuejs3 vite vitest

【解决方案1】：

您只需在 vitest.config.js 文件中指定别名：

import path from 'path'
import vue from '@vitejs/plugin-vue'

export default {
  plugins: [vue()],
  test: {
    globals: true,
    environment: 'jsdom',
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, '.')
    },
  },
}

【讨论】：