Vitest中'@/...'导入路径解析失败问题求助

问题描述 #

运行Vitest测试时出现导入解析错误：

FAIL tests/utils/ConvertFromDomainToCountryCode.test.ts [ tests/utils/ConvertFromDomainToCountryCode.test.ts ]
Error: Failed to resolve import "@/constant" from "src/assets/ts/_utils/ConvertFromDomainToCountryCode.ts". Does the file exist?

测试文件ConvertFromDomainToCountryCode.test.ts代码：

import { describe, expect } from "vitest";
import { SetFlags } from "../../src/assets/ts/_utils/ConvertFromDomainToCountryCode.ts";

describe("Convert From Domain To CountryCode", () => {
  test("function defined", () => {
    expect(SetFlags).toBeDefined();
  });
});

被测试文件ConvertFromDomainToCountryCode.ts中的导入语句：

import { COUNTRY_INFO } from "@/constant";

手动将路径替换为相对路径../../../constant/index后测试可正常运行，且Vite配置文件vite.config.ts已配置@别名指向src目录：

import { fileURLToPath, URL } from "node:url";

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { resolve, dirname } from "node:path";
import vueJsx from "@vitejs/plugin-vue-jsx";

export default defineConfig({
  plugins: [
    vue(),
    vueJsx()
  ],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url))
    }
  },
  base: "/"
});

系统环境信息：

OS: macOS 13.2.1
CPU: (8) arm64 Apple M1 Pro
Memory: 91.50 MB / 16.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 16.18.1 - ~/.nvm/versions/node/v16.18.1/bin/node
Yarn: 1.22.19 - ~/.nvm/versions/node/v16.18.1/bin/yarn
npm: 8.19.2 - ~/.nvm/versions/node/v16.18.1/bin/npm
Browsers:
Chrome: 111.0.5563.64
Safari: 16.3
npmPackages:
@vitejs/plugin-vue: ^3.1.2 => 3.2.0
@vitejs/plugin-vue-jsx: ^3.0.0 => 3.0.0
@vitest/coverage-istanbul: ^0.29.3 => 0.29.3
vite: ^3.1.8 => 3.2.5
vitest: ^0.29.3 => 0.29.3

解决方案 #

问题根源是Vitest默认不会自动继承Vite配置中的别名规则，需要手动让Vitest识别这些配置，以下两种方法均可解决：

方法一：在Vite配置中添加Vitest的别名配置 #

修改vite.config.ts，在配置中新增test块，直接复用或重新定义别名：

import { fileURLToPath, URL } from "node:url";

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";

export default defineConfig({
  plugins: [vue(), vueJsx()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url))
    }
  },
  base: "/",
  test: {
    resolve: {
      // 直接复用Vite的别名配置
      alias: { ...resolve.alias }
    }
  }
});

也可以单独在test.resolve.alias中重新定义一次，效果一致。

方法二：创建独立的Vitest配置文件并合并Vite配置 #

新建vitest.config.ts文件，导入原有Vite配置并合并，让Vitest自动继承所有Vite的resolve规则：

import { defineConfig, mergeConfig } from 'vitest/config';
import viteConfig from './vite.config';

export default mergeConfig(viteConfig, defineConfig({
  test: {
    // 可添加其他Vitest专属配置，比如环境、覆盖率等
  }
}));

额外验证 #

确保src/constant/index.ts（或.js）文件确实存在，因为Vite默认会自动解析目录下的index文件，所以@/constant会指向该文件。

完成配置修改后，重新运行测试命令即可正常解析@别名路径。

内容的提问来源于stack exchange，提问作者mahmutoz