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 matchMediaObject.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 testafterEach(() => { cleanup();});