Svelte 5，测试出现问题，为什么我的 vite.config 文件中会出现此过载错误，如何修复它？

Question

我的 vite.config 支持 Svelte 5 应用程序

• 使用'@'解析./src
• 支持 vitest 等测试（如果我需要更改，则支持 jest）

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

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;

测试

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');
  });
});

设置.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();
});

Answer 1

Vite中不包含测试配置，需要添加类型引用

vitest

。

/// <reference types="vitest" />
import { defineConfig } from 'vite';
...

文档