How to use svelte.config.js with Vitest similar to vite.config.js

[EstebanBorai]

Im working on a Sveltekit project where I'm using Vitest to implement unit tests.
My svelte.config.js file is the following:

import adapter from '@sveltejs/adapter-auto';
import preprocess from 'svelte-preprocess';

const config = {
  preprocess: preprocess(),
  kit: {
    adapter: adapter(),
    target: '#svelte',
    vite: {
      resolve: {
        alias: {
          $i18n: path.resolve('./src/i18n'),
          $lib: path.resolve('./src/lib'),
        },
      },
    },
  },
};

Where config.kit.vite defines vite.config.js related configuration.
In my tests I import a Svelte component which imports the following module using the $i18n alias in the path:

import { LL } from '$i18n/i18n-svelte';

But when executing tests with Vitest I get the following error:

 Failed to resolve import "$i18n/i18n-svelte" from "{file directory}". Does the file exist?

Even though the module gets resolved when running the project using the development server, I can't get to resolve it using the alias configuration via Vitest.

I can see in the docs, under the Configure Vitest section:

vitest will read your root vite.config.ts to match with the plugins and setup as your Vite app. For example, your Vite resolve.alias and plugins configuration will work out-of-the-box.

I don't see a way to provide custom alias to vitest.config.js (https://vitest.dev/config/), If I could import the config from svelte.config.js and provide the config.kit.vite configuration would be great.

[antfu]

I think it requires support from Svelte directly to provide their internal plugins. Similar to how iles does it https://twitter.com/ilesjs/status/1470821030289629195

[EstebanBorai]

I will investigate more in this path @antfu , thanks a lot for the insight!

[benmccann]

This particular issue doesn't seem related to SvelteKit's internal plugins though, but rather the user's own $i18n alias that they can't figure out how to provide in vitest.config.js. I'm not sure why they can't provide that?

[dominikg]

for component testing you can use a separate vite+svelte setup and share aliases like this

svelte.config.js

export const sveltekitViteConfig = {
  resolve: {
    alias: {
      $i18n: path.resolve('./src/i18n'),
      $lib: path.resolve('./src/lib'),
    },
  },
}

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

    // hydrate the <div id="svelte"> element in src/app.html
    target: '#svelte',
    vite: sveltekitViteConfig,
  },
}

export default config

vitest.config.ts

import type { UserConfig } from 'vite'
import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
import { sveltekitViteConfig } from './svelte.config.js'

export default defineConfig({
  ...sveltekitViteConfig as UserConfig,
  plugins: [
    svelte({ hot: !process.env.VITEST }),
  ],
  test: {
    // vitest config here
    global: true,
    environment: 'jsdom',
  },
})

this only works for self-contained components though, routes and other things that rely on sveltekit internals won't work out of the box

[benmccann]

@EstebanBorai I think we'd be interested in better supporting Vitest with SvelteKit. If your project is open source, I'd love if you could share a link here as an example!

[EstebanBorai]

Of course! The project in question is not open sourced but I created a reproduction repository here:
https://github.com/EstebanBorai/vitest-discussion-331

I'm glad to help @benmccann! Let me know if I can help somehow.

[cibernox]

This setup still doesn't make default sveltekit aliases (like $app from import { page } from "$app/stores";).

What is it needed for vitest to work out of the box with sveltekit?

[EstebanBorai]

Have you read this: #331 (comment) ? I believe that would be the path.

In the "ideal world" you may not have to define paths/aliases manually for the $app directory given that is native for SvelteKit.

There's another discussion I've open here: sveltejs/kit#3154 related to issues with the .svelte-kit directory and the $app directory,

[benmccann]

Probably the best discussion of how to make SvelteKit better support Vitest has happened in the #svelte channel on the Vitest Discord here: https://discord.com/channels/917386801235247114/918804871333945394/929824676014854174

[nickbreaton]

Hey all, I've published a package that essentially automates this configuration, plus a few niceties around $lib mapping and $app modules. Would love some feedback if you have any:

https://github.com/nickbreaton/vitest-svelte-kit

[benmccann]

I've refactored SvelteKit such that it's essentially just a Vite plugin in dev mode. I will add support for preview mode as well, but that depends on Vite 3. I'd love for folks to try it out with Vitest. See here: sveltejs/kit#5094

[nickbreaton]

I'll definitely give it a go this weekend!

[benmccann]

@sveltejs/kit/experimental/vite has been released in @sveltejs/kit version 1.0.0-next.353. Feedback welcome in sveltejs/kit#5184