SvelteKit中/tests目录导入TS模块的扩展名冲突问题求助

1. 统一TypeScript配置（tsconfig.json） #

核心是让TypeScript用相同规则解析/tests和/src目录，修改tsconfig.json：

{
  "compilerOptions": {
    // 启用NodeNext模块解析，适配现代TS模块导入逻辑
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    // 允许导入.ts扩展名，直接消除TS2691错误
    "allowImportingTsExtensions": true,
    // 测试代码无需编译输出，开启noEmit提升效率
    "noEmit": true,
    "baseUrl": ".",
    // 可选：配置路径别名，简化导入（例：@tests/lib/helpers/xxx）
    "paths": {
      "@tests/*": ["./tests/*"]
    }
  },
  // 必须把tests目录加入TypeScript的扫描范围
  "include": ["src/**/*", "tests/**/*"],
  "exclude": ["node_modules"]
}

2. 适配ESLint规则（按需调整） #

如果ESLint仍有报错，修改.eslintrc.json，针对测试目录放宽扩展名检查：

{
  "overrides": [
    {
      "files": ["tests/**/*.ts"],
      "rules": {
        "@typescript-eslint/no-relative-imports-with-extension": "off"
      }
    }
  ]
}

3. 配置Playwright模块解析 #

确保Playwright能自动识别无扩展名的TS文件，在playwright.config.ts中添加扩展名优先级：

import { defineConfig } from '@playwright/test';

export default defineConfig({
  testDir: './tests',
  resolve: {
    // 优先查找.ts文件，解决无扩展名导入的“模块未找到”问题
    extensions: ['.ts', '.js'],
  },
});

4. 验证导入效果 #

现在两种导入方式都能正常工作：

• 推荐：无扩展名导入

  import { freshStorage } from './lib/helpers/fresh-storage';
  

• 可选：带扩展名导入（不再触发TS错误）

  import { freshStorage } from './lib/helpers/fresh-storage.ts';
  

配置完成后，/tests目录的模块导入逻辑就和/src目录完全对齐，不会再出现模块找不到或TS/ESLint报错的问题。

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