Vitest无法正确解析TypeScript，运行测试报RollupError

测试设置代码 #

import { describe, it } from "vitest";
import { init, initServer } from "../src";
import dotenv from "dotenv";

dotenv.config();

describe("#setup", () => {
  it("should initialize the server", async () => {
    await init(await initServer() as string);
  });
});

注意：不能使用beforeEach或其他前置方法，因为它只能在测试命令中运行一次。

运行测试时的报错 #

[!] RollupError: src/index.ts (22:23): Expected ',', got ':' (Note that you need plugins to import files that are not JavaScript)
src/index.ts (22:23)
20:  * @async
21:  */
22: const init = async (url: string, password?: string) => {
                           ^
23:   const response = await fetch(url);
RollupError: Expected ',', got ':'

我确认这段TypeScript代码语法合法，但不清楚报错原因，以下是我的相关配置：

Vite配置 #

import {defineConfig} from "vite";

export default defineConfig({
  server: {
    watch: {
      ignored: ["node_modules", "dist"]
    }
  },
  test: {
    globalSetup: "tests/setup.spec.ts"
  }
});

Vitest工作区配置 #

import { defineWorkspace } from "vitest/config";

export default defineWorkspace([
    {
    extends: "vite.config.ts",
    test: {
        include: ["tests/setup.spec.ts"],
        name: "setup",
        environment: "node" 
    }
}])

Rollup配置 #

import serve from "rollup-plugin-serve";
import typescript from "@rollup/plugin-typescript";
import copy from "rollup-plugin-copy";

export default [
  {
    input: "src/index.ts",
    output: [
      {
        dir: "dist",
        format: "es"
      }
    ],

    inlineDynamicImports: true,
    presserveModules: true, // 注意：此处拼写错误，应为preserveModules
    plugins: [
      serve({contentBase: "dist"}),
      typescript(),
      copy({targets: [{src: "src/server/init.sh", dest: "dist"}]})
    ],
    external: ["express"]
  }
];

问题原因分析 #

报错核心是Rollup无法识别TypeScript的类型注解（url: string），本质是测试环境下的代码未经过TypeScript转译。虽然Rollup配置中添加了@rollup/plugin-typescript，但Vitest运行测试时，未正确继承或启用TS转译逻辑，导致把TS代码当作原生JS解析，而JS不支持类型注解语法。

解决方案 #

1. 明确Vitest测试环境的TS配置
   在Vite配置的test选项中指定TS配置文件路径，确保测试时能正确转译TS代码：

   export default defineConfig({
     // ...其他配置
     test: {
       globalSetup: "tests/setup.spec.ts",
       tsconfig: "./tsconfig.json" // 添加该行，指向你的tsconfig文件
     }
   });
   

2. 验证工作区配置的继承有效性
   确认Vitest工作区配置中extends: "vite.config.ts"能正确加载Vite配置，保证测试环境继承了必要的TS转译插件，避免配置被意外覆盖。

3. 修复Rollup配置的拼写错误
   将presserveModules改为preserveModules，避免后续打包出现异常。

4. 检查依赖完整性
   确保已安装必要依赖：

   npm install typescript @rollup/plugin-typescript @types/node --save-dev
   

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