Quantcast
Channel: Active questions tagged svelte - Stack Overflow
Viewing all articles
Browse latest Browse all 1541

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

$
0
0

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

Viewing all articles
Browse latest Browse all 1541

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>