如何修改vitest.config.js让单元测试识别SvelteKit的$app/navigation？

我在+page.svelte中编写了如下Svelte代码：

import { goto } from "$app/navigation";

编写单元测试时导入该组件：

import myTest from "./+page.svelte"

但出现错误：

Error: Failed to resolve import "$app/navigation" from "src\routes\mariner+page.svelte". Does the file exist?

请问如何修改vitest.config.js，让单元测试能够识别SvelteKit的$app模块？

你可以通过两种方式配置vitest.config.js来解决这个问题：

方式一：使用SvelteKit官方Vitest预设 #

1. 先安装必要依赖（未安装的话）：

npm install -D vitest-svelte-kit @testing-library/svelte

2. 修改vitest.config.js：

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vitest/config';

export default defineConfig({
	plugins: [sveltekit()],
	test: {
		include: ['src/**/*.{test,spec}.{js,ts}'],
		environment: 'svelte',
		globals: true
	}
});

这个配置会自动处理SvelteKit的$app等内置模块的解析，无需手动模拟。

方式二：手动添加别名与模拟模块 #

如果不想使用官方预设，可以手动为$app模块配置别名并编写模拟代码：

1. 修改vitest.config.js：

import { defineConfig } from 'vitest/config';
import path from 'path';

export default defineConfig({
	test: {
		include: ['src/**/*.{test,spec}.{js,ts}'],
		resolve: {
			alias: {
				'$app/navigation': path.resolve(__dirname, 'tests/mocks/app/navigation.js')
			}
		}
	}
});

2. 在指定路径创建模拟文件tests/mocks/app/navigation.js，编写模拟逻辑：

import { vi } from 'vitest';
export const goto = vi.fn();

完成配置后重新运行单元测试，$app/navigation的导入即可被正确识别或模拟，不会再出现解析错误。

内容的提问来源于stack exchange，提问作者Jack