Svelte 5测试问题：vite.config重载错误原因与解决办法

项目信息 #

• Github仓库：crypto-basis-frontend
• 最新提交版本安装依赖命令：npm install --legacy-peer-deps
• 恢复测试正常版本命令：git co c12c6ad853163669f1b549a4d3a34af149c5710b

需求与配置 #

需为Svelte 5应用配置Vite，满足以下需求：

1. 用@解析./src路径
2. 支持Vitest测试（可改用Jest）

当前vite.config.js代码：

import { defineConfig } from 'vite';
import { sveltekit } from '@sveltejs/kit/vite';
import path from 'path';

export default defineConfig({
  plugins: [sveltekit()],
  resolve: {
    alias: {
      '@': path.resolve('./src')
    }
  },
  test: {
    include: ['src/**/*.{test,spec}.{js,ts}'],
    globals: true,
    environment: 'jsdom',
    setupFiles: ['src/setupTests.ts']
  }
})

报错信息 #

No overload matches this call.
  The last overload gave the following error.
    Object literal may only specify known properties, and 'test' does not exist in type 'UserConfigExport'.ts(2769)
index.d.ts(3577, 18): The last overload is declared here.
(property) test: {
    include: string[];
    globals: boolean;
    environment: string;
    setupFiles: string[];
}

相关配置文件 #

package.json #

{
    "name": "cryptobasis",
    "private": true,
    "version": "0.0.1",
    "type": "module",
    "scripts": {
        "dev": "vite dev",
        "build": "vite build",
        "preview": "vite preview",
        "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
        "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
        "test": "vitest",
        "test:coverage": "vitest run --coverage"
    },
    "devDependencies": {
        "@sveltejs/adapter-auto": "^3.0.0",
        "@sveltejs/kit": "^2.9.0",
        "@sveltejs/vite-plugin-svelte": "^5.0.0",
        "@testing-library/jest-dom": "^6.6.3",
        "@testing-library/svelte": "^5.2.6",
        "@types/node": "^22.10.2",
        "jsdom": "^25.0.1",
        "svelte": "^5.0.0",
        "svelte-check": "^4.0.0",
        "typescript": "^5.0.0",
        "vite": "^6.0.0",
        "vitest": "^2.1.8"
    }
}

svelte.config.js #

import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter(),
    alias: {
      '@': './src'
    }
  },
  preprocess: vitePreprocess()
};

export default config;

测试代码 #

测试文件（Header.test.js） #

import { describe, it, expect } from 'vitest';
import { render } from '@testing-library/svelte';
import Header from './Header.svelte';
import { TRACK_YOUR_PNL } from '@/constants/copy';

describe('Header Component', () => {
  it('renders with the correct title in uppercase', () => {
    const { getByText } = render(Header, { props: { title: 'Test Title' } });
    
    const headerElement = getByText('TEST TITLE');
    expect(headerElement).toBeInTheDocument();
    expect(headerElement.tagName.toLowerCase()).toBe('h1');
    expect(headerElement).toHaveClass('space-grotesk-900');
  });

  it('renders the subtitle with correct text and styling', () => {
    const { getByText } = render(Header, { props: { title: 'Any Title' } });
    
    const subtitleElement = getByText(TRACK_YOUR_PNL);
    expect(subtitleElement).toBeInTheDocument();
    expect(subtitleElement.tagName.toLowerCase()).toBe('h3');
    expect(subtitleElement).toHaveClass('space-grotesk-300');
  });
});

setupTests.ts #

import '@testing-library/jest-dom';
import { vi } from 'vitest';
import { cleanup } from '@testing-library/svelte';

// Mock matchMedia
Object.defineProperty(window, 'matchMedia', {
  writable: true,
  value: vi.fn().mockImplementation(query => ({
    matches: false,
    media: query,
    onchange: null,
    addListener: vi.fn(),
    removeListener: vi.fn(),
    addEventListener: vi.fn(),
    removeEventListener: vi.fn(),
    dispatchEvent: vi.fn(),
  })),
});

// Cleanup after each test
afterEach(() => {
  cleanup();
});

问题 #

配置Vite.config以支持Vitest测试时出现上述TypeScript重载错误，请求分析原因并提供解决办法。

解决方案 #

原因分析 #

Vite 6的UserConfigExport类型不再默认包含test字段，TypeScript无法识别该配置项；同时SvelteKit的Vite插件对配置结构有特定要求，需要显式导入Vitest的类型声明来扩展配置类型。

解决步骤 #

1. 导入Vitest类型声明
   在vite.config.js顶部添加类型引用，让TypeScript识别test字段：

   /// <reference types="vitest" />
   

2. 修正Vite配置文件
   修改后的完整vite.config.js如下：

   /// <reference types="vitest" />
   import { defineConfig } from 'vite';
   import { sveltekit } from '@sveltejs/kit/vite';
   import path from 'path';
   
   export default defineConfig({
     plugins: [sveltekit()],
     resolve: {
       alias: {
         '@': path.resolve('./src')
       }
     },
     test: {
       include: ['src/**/*.{test,spec}.{js,ts}'],
       globals: true,
       environment: 'jsdom',
       setupFiles: ['src/setupTests.ts']
     }
   })
   

3. 补充TypeScript配置
   在tsconfig.json的compilerOptions中添加Vitest和jsdom的类型，确保类型检查正常：

   {
     "compilerOptions": {
       "types": ["vitest", "jsdom"]
     }
   }
   

4. 验证配置有效性
   执行npm run test检查测试是否正常运行，同时确认TypeScript报错消失。若仍有问题，可删除node_modules和package-lock.json，重新执行npm install --legacy-peer-deps重装依赖。

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