Where config.kit.vite defines vite.config.js related configuration.
\nIn 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:
\n Failed to resolve import \"$i18n/i18n-svelte\" from \"{file directory}\". Does the file exist?\nEven 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.
\nI can see in the docs, under the Configure Vitest section:
\nvitest 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.\nI 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.
for component testing you can use a separate vite+svelte setup and share aliases like this
\nsvelte.config.js
\nexport const sveltekitViteConfig = {\n resolve: {\n alias: {\n $i18n: path.resolve('./src/i18n'),\n $lib: path.resolve('./src/lib'),\n },\n },\n}\n\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n kit: {\n adapter: adapter(),\n\n // hydrate the <div id=\"svelte\"> element in src/app.html\n target: '#svelte',\n vite: sveltekitViteConfig,\n },\n}\n\nexport default configvitest.config.ts
\nimport type { UserConfig } from 'vite'\nimport { defineConfig } from 'vite'\nimport { svelte } from '@sveltejs/vite-plugin-svelte'\nimport { sveltekitViteConfig } from './svelte.config.js'\n\nexport default defineConfig({\n ...sveltekitViteConfig as UserConfig,\n plugins: [\n svelte({ hot: !process.env.VITEST }),\n ],\n test: {\n // vitest config here\n global: true,\n environment: 'jsdom',\n },\n})this only works for self-contained components though, routes and other things that rely on sveltekit internals won't work out of the box
","upvoteCount":4,"url":"https://github.com/vitest-dev/vitest/discussions/331#discussioncomment-1875348"}}}
How to use svelte.config.js with Vitest similar to vite.config.js
#331
-
|
Im working on a Sveltekit project where I'm using Vitest to implement unit tests. 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 import { LL } from '$i18n/i18n-svelte';But when executing tests with Vitest I get the following error: 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: I don't see a way to provide custom alias to |
Beta Was this translation helpful? Give feedback.
Replies: 4 comments 11 replies
-
|
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 |
Beta Was this translation helpful? Give feedback.
-
|
I will investigate more in this path @antfu , thanks a lot for the insight! |
Beta Was this translation helpful? Give feedback.
-
|
This particular issue doesn't seem related to SvelteKit's internal plugins though, but rather the user's own |
Beta Was this translation helpful? Give feedback.
-
|
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 configvitest.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 |
Beta Was this translation helpful? Give feedback.
-
|
@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! |
Beta Was this translation helpful? Give feedback.
-
|
Of course! The project in question is not open sourced but I created a reproduction repository here: I'm glad to help @benmccann! Let me know if I can help somehow. |
Beta Was this translation helpful? Give feedback.
-
|
This setup still doesn't make default sveltekit aliases (like What is it needed for vitest to work out of the box with sveltekit? |
Beta Was this translation helpful? Give feedback.
-
|
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 There's another discussion I've open here: sveltejs/kit#3154 related to issues with the |
Beta Was this translation helpful? Give feedback.
-
|
Probably the best discussion of how to make SvelteKit better support Vitest has happened in the |
Beta Was this translation helpful? Give feedback.
-
|
Hey all, I've published a package that essentially automates this configuration, plus a few niceties around |
Beta Was this translation helpful? Give feedback.
-
|
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 |
Beta Was this translation helpful? Give feedback.
-
|
I'll definitely give it a go this weekend! |
Beta Was this translation helpful? Give feedback.
-
|
|
Beta Was this translation helpful? Give feedback.
for component testing you can use a separate vite+svelte setup and share aliases like this
svelte.config.js
vitest.config.ts