Svelte 5, Problem with tests, why am I getting this overload error in my vite.config file and how do I fix it?

Question

Github Repo: https://github.com/Gaban-Ventures/crypto-basis-frontend

With the latest commit you have to run npm install --legacy-peer-deps

To run normal before the breaking tests, do:

git co c12c6ad853163669f1b549a4d3a34af149c5710b

---

My vite.config is supporting a Svelte 5 app

• Use '@' to resolve ./src
• Support tests like vitest (or jest if I need to change)

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

The error

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[];
}

My 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"
    }
}

Other things I've tried: 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;

The test

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

setup.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

I noticed you're using svelte-testing-library but you're not adding it to your plugins in your vite.config.ts like is mentioned in the docs.

/// vite.config.ts
import { defineConfig } from 'vitest/config';
import { sveltekit } from '@sveltejs/kit/vite';
import { svelteTesting } from '@testing-library/svelte/vite'; // Add this

export default defineConfig({
  plugins: [
    sveltekit(),
    svelteTesting() // Add this
  ],
  ...
)}

I tried fetching your github repo and added this to the config and everything ran smoothly with all tests passed.