Provided configuration for vitest does not work with SvelteKit library methods

[wtachau]

Describe the bug

Hello there, big fan of SvelteKit! Hoping this is a helpful bug report and not just noise.

If my understanding is correct, there is a bug with the initial configuration of vitest in SvelteKit apps that prevents you from using SvelteKit library methods (like browser from "$app/environment").

While I don't imagine most people use SvelteKit library methods directly in their unit tests, it was preventing me from importing files that did.

The solution for me was to add deps: { inline: ['@sveltejs/kit'] }, in my vite config:

export default defineConfig({
  ...
  test: {
    deps: { inline: ['@sveltejs/kit'] },
    globals: true,
  },
});

(Seemingly) related:

• fix: add $app and $env to optimizeDeps.exclude #7933
• import.meta.env undefined after upgrade from 405 to 432 #6259
• Added Option to Automatically Add Vitest to New Projects using svelte-create #5708

Reproduction

Create a new SvelteKit app with all the goodies:

$  npm create svelte@latest test

create-svelte version 2.3.4

Welcome to SvelteKit!

✔ Which Svelte app template? › Skeleton project
✔ Add type checking with TypeScript? › Yes, using TypeScript syntax
✔ Add ESLint for code linting? … No / Yes # Yes
✔ Add Prettier for code formatting? … No / Yes # Yes
✔ Add Playwright for browser testing? … No / Yes # Yes
✔ Add Vitest for unit testing? … No / Yes # Heck Yes

Your project is ready!

Add code that imports from "$app/environment" in a test:

// index.test.ts
import { browser } from '$app/environment';
import { describe, it, expect } from 'vitest';

describe('sum test', () => {
	if (browser) {
		console.log('oh no!');
	}

	it('adds 1 + 2 to equal 3', () => {
		expect(1 + 2).toBe(3);
	});
});

Tests fail!

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Suites 1 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 FAIL  src/index.test.ts [ src/index.test.ts ]
Error: Cannot find package '$internal' imported from /Users/willtachau/src/third-party/test-new-sveltekit/foo/test/node_modules/@sveltejs/kit/src/runtime/shared.js


⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯

 Test Files  1 failed (1)
      Tests  no tests
   Start at  16:10:17
   Duration  1.44s (transform 322ms, setup 0ms, collect 0ms, tests 0ms)

Logs

No response

System Info

System:
    OS: macOS 13.1
    CPU: (32) x64 Intel(R) Xeon(R) W-3245 CPU @ 3.20GHz
    Memory: 3.68 GB / 96.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.11.0 - ~/.asdf/installs/nodejs/18.11.0/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 8.19.2 - ~/.asdf/plugins/nodejs/shims/npm
  Browsers:
    Chrome: 109.0.5414.119
    Firefox: 95.0.2
    Safari: 16.2
  npmPackages:
    @sveltejs/adapter-auto: ^2.0.0 => 2.0.0
    @sveltejs/kit: ^1.5.0 => 1.5.5
    svelte: ^3.54.0 => 3.55.1
    vite: ^4.0.0 => 4.1.1

Severity

annoyance

Additional Information

No response

[CaptainCodeman]

This solved a problem for me when I was getting this error:

Error: Cannot find package '$internal' imported from /project/node_modules/.pnpm/@sveltejs+kit@1.5.6_svelte@3.55.1+vite@4.1.1/node_modules/@sveltejs/kit/src/runtime/shared.js

[Rich-Harris]

Thanks to some recent changes the reproduction in this issue works in newer versions, so I'll close this