SvelteKit路由slug组件Vitest测试：如何初始化参数？

方法1：直接模拟page store #

SvelteKit的page store支持手动设置值，测试时直接给它传入带slug的参数即可：

1. 先在测试文件导入所需模块：

import { render } from '@testing-library/svelte';
import { page } from '$app/stores';
import Page from '../src/item/[slug]/+page.svelte';

2. 在测试执行前初始化slug参数：

// 给page store设置包含目标slug的参数对象
page.set({
  params: { slug: 'test-slug' },
  // 组件若用到page的其他属性（如url、route），需一并补充
  url: new URL('http://localhost/item/test-slug'),
  route: { id: '/item/[slug]' }
});

test('渲染带指定slug的页面组件', async () => {
  const { getByText } = render(Page);
  // 根据组件实际逻辑编写断言，比如检查slug是否正常渲染
  expect(getByText('test-slug')).toBeInTheDocument();
});

方法2：Mock整个$app/stores模块 #

如果不想直接操作page store，也可以用Vitest的mock功能替换整个$app/stores模块：

import { render } from '@testing-library/svelte';
import Page from '../src/item/[slug]/+page.svelte';

// Mock $app/stores，返回自定义的page订阅逻辑
vi.mock('$app/stores', () => ({
  page: {
    subscribe: (callback) => {
      // 直接把带slug的page对象传给订阅回调
      callback({
        params: { slug: 'test-slug' },
        url: new URL('http://localhost/item/test-slug'),
        route: { id: '/item/[slug]' }
      });
      // 返回空的取消订阅函数，避免内存泄漏
      return () => {};
    }
  }
}));

test('渲染带指定slug的页面组件', async () => {
  const { getByText } = render(Page);
  expect(getByText('test-slug')).toBeInTheDocument();
});

额外注意事项 #

• 若组件用到page对象的其他属性（如url.pathname、route.id），模拟时必须完整提供对应属性值，否则会触发报错。
• 确保Vitest配置文件中正确处理SvelteKit的模块别名，示例配置（vite.config.ts）：

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

export default defineConfig({
  test: {
    environment: 'jsdom',
    alias: {
      '$app': path.resolve(__dirname, './node_modules/@sveltejs/kit/src/runtime/app')
    }
  }
});

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