fix: ensure importing $app/navigation in unit tests work (#14195)

* add fix and test

* changeset

* format

* can't colocate vitest and playwright tests

* Apply suggestion from @eltigerchino

* Apply suggestion from @eltigerchino

* Apply suggestion from @eltigerchino

* clean up comment

Author: eltigerchino

.changeset/thin-badgers-cough.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: ensure importing from `$app/navigation` works in test files

packages/kit/src/runtime/client/client.js

@@ -185,7 +185,10 @@ let target;
 export let app;
 
 /** @type {Record<string, any>} */
-export const remote_responses = __SVELTEKIT_PAYLOAD__.data ?? {};
+// we have to conditionally access the properties of `__SVELTEKIT_PAYLOAD__`
+// because it will be `undefined` when users import the exports from this module.
+// It's only defined when the server renders a page.
+export const remote_responses = __SVELTEKIT_PAYLOAD__?.data ?? {};
 
 /** @type {Array<((url: URL) => boolean)>} */
 const invalidated = [];

packages/kit/test/apps/basics/package.json

@@ -8,25 +8,28 @@
 		"preview": "vite preview",
 		"prepare": "svelte-kit sync",
 		"check": "svelte-kit sync && tsc && svelte-check",
-		"test": "node test/setup.js && pnpm test:dev && pnpm test:build",
+		"test": "node test/setup.js && pnpm test:unit && pnpm test:dev && pnpm test:build",
 		"test:dev": "rm -rf test/errors.json && DEV=true playwright test",
 		"test:build": "rm -rf test/errors.json && PUBLIC_PRERENDERING=false playwright test",
 		"test:cross-platform:dev": "node test/setup.js && rm -rf test/errors.json && DEV=true playwright test test/cross-platform/",
 		"test:cross-platform:build": "node test/setup.js && rm -rf test/errors.json && playwright test test/cross-platform/",
 		"test:server-side-route-resolution:dev": "node test/setup.js && rm -rf test/errors.json && DEV=true ROUTER_RESOLUTION=server playwright test",
-		"test:server-side-route-resolution:build": "node test/setup.js && rm -rf test/errors.json && PUBLIC_PRERENDERING=false ROUTER_RESOLUTION=server playwright test"
+		"test:server-side-route-resolution:build": "node test/setup.js && rm -rf test/errors.json && PUBLIC_PRERENDERING=false ROUTER_RESOLUTION=server playwright test",
+		"test:unit": "vitest run"
 	},
 	"devDependencies": {
 		"@opentelemetry/api": "^1.9.0",
 		"@opentelemetry/sdk-node": "^0.203.0",
 		"@opentelemetry/sdk-trace-node": "^2.0.1",
 		"@sveltejs/kit": "workspace:^",
 		"@sveltejs/vite-plugin-svelte": "catalog:",
+		"@vitest/browser": "^3.2.4",
 		"svelte": "^5.35.5",
 		"svelte-check": "^4.1.1",
 		"test-redirect-importer": "workspace:*",
 		"typescript": "^5.5.4",
-		"vite": "catalog:"
+		"vite": "catalog:",
+		"vitest": "catalog:"
 	},
 	"type": "module"
 }

packages/kit/test/apps/basics/unit-test/client.spec.js

@@ -0,0 +1,7 @@
+import { expect, test } from 'vitest';
+
+// some users will import these modules to mock them in Vitest so we need to test
+// that importing them works
+test('$app/navigation can be imported', async () => {
+	await expect(import('$app/navigation')).resolves.not.toThrow();
+});

packages/kit/test/apps/basics/vite.config.js

@@ -1,8 +1,8 @@
 import * as path from 'node:path';
 import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vitest/config';
 
-/** @type {import('vite').UserConfig} */
-const config = {
+export default defineConfig({
 	build: {
 		minify: false
 	},
@@ -17,7 +17,25 @@ const config = {
 		fs: {
 			allow: [path.resolve('../../../src')]
 		}
+	},
+	test: {
+		expect: { requireAssertions: true },
+		projects: [
+			{
+				extends: './vite.config.js',
+				test: {
+					name: 'client',
+					environment: 'browser',
+					browser: {
+						enabled: true,
+						provider: 'playwright',
+						instances: [{ browser: 'chromium' }],
+						headless: true
+					},
+					include: ['unit-test/**/*.spec.js'],
+					setupFiles: ['./vitest-setup-client.ts']
+				}
+			}
+		]
 	}
-};
-
-export default config;
+});

packages/kit/test/apps/basics/vitest-setup-client.ts

@@ -0,0 +1,2 @@
+/// <reference types="@vitest/browser/matchers" />
+/// <reference types="@vitest/browser/providers/playwright" />