Generating the .svelte-kit directory for testing purposes

[LeoBorai]

Hi! Im working on a unit test suite with Vitest where Im testing my __layout.svelte component and the $app directory is imported.

<script lang="ts">
  import { mode } from '$app/env';
  // --snip--
</script>

But when I run the tests I get the following error:

Error: failed to load /.svelte-kit/dev/runtime/app/env

Investigating on the issue I got to the conclusion that the .svelte-kit directory is not available when running tests, because such directory is only available when running SvelteKit on development mode.

In order to resolve such module in vitest, I have mapped the alias section for the vite configuration provided to both, sveltekit and vitest as follows:

    // vitest.config.js

    alias: {
      ...viteConfig.resolve.alias, // Aliases provided to SvelteKit
      $app: path.resolve('./.svelte-kit/dev/runtime/app'), // The `$app` alias
    },

Is there a way to generate the .svelte-kit directory for this purposes? Or is there any pattern on testing components which may include the $app directory?

Thanks in advance!

[ignatiusmb]

Since you're pointing to .svelte-kit/dev/..., you'll need to run svelte-kit dev once to generate it before running the test.

[LeoBorai]

Yeah I thought about that, but involves also making sure the development server is stopped before running the tests as I running these as part of my CI workflows.

I thought about exposing the generation of these files with a separate command, something like bootstrap or setup which generates these assets for purposes like this.

[ignatiusmb]

You can also use the build command, just make sure to adjust the paths accordingly. Which also means you'll need an adapter, either that or find a way to stop the dev server that is suitable for your CI environment.

[jbergstroem]

How would one invoke svelte-kit build to do a development / test (read: not production) environment build?

[ignatiusmb]

These commands are meant to be used in a CLI environment, so I don't think there's any way to go around this, other than to run a file that spawns a child process that exits immediately, or use built-in Linux commands like nohup.

On the bright side, there's been some changes to how the generated files are placed, so dev and build commands will have the same .svelte-kit/runtime directory that you can point to as they're essentially the same. I would recommend to just slap an(y) adapter, and have it run the build command once before testing.

[jbergstroem]

The approach here was incorrect from an architectural point of view (vitest can lean on vitejs and in turn, sveltekit to manage the runtime); but better understanding the adapter output based on what you said is appreciated. Thanks!

[vhscom]

Since Playwright was recently added to the template generator I subbed an issue for Vitest as well, which, if implemented, should help alleviate related Q&A items. #4143

[LeoBorai]

Awesome! Thanks for that contribution, the Playwright addition will help me and my team a lot as we are planning to use it soon.

[benmccann]

The best way to use Vitest will be to use @sveltejs/kit/experimental/vite. See #5184 and #5094