如何使用Vitest Mock直接导入的Svelte Store并预设状态？

我是Svelte新手，想了解如何为**直接导入（而非作为组件props传入）**的svelte/store设置预设状态并正确Mock。目前我用了一种可行的实现方式，但不确定是否规范，以下是我的代码示例：

example.svelte #

<script lang="ts">
    import { userIds } from './store'

    function storeHandler(ids: Set<string>) {
        // some logic with the store values
        return ids
    }
    $: result = storeHandler($userIds)
</script>

{#each result as item}
    some funky stuff 
{/each}

store.ts #

import { writable } from 'svelte/store'

export const userIds = writable<Set<string>>(new Set())

example.test.ts #

it('some test case', async () => {
        userIds.set(new Set(['612e8978c1af93207fc97808']))
        render(Example)

        //some test actions that are actually passing correctly

        userIds.set(new Set())
    })

规范实现方案 #

你的当前实现是可行的，但可以根据场景选择更规范的方式，同时注意避免测试间的状态污染：

1. 直接修改Store（轻量场景推荐）

这种方式简单直接，核心是测试后必须重置状态。你已经在测试末尾调用userIds.set(new Set())，这是正确的，但可以用测试框架的钩子统一处理，避免遗漏：

// 在测试文件顶部添加
afterEach(() => {
  userIds.set(new Set());
});

it('some test case', async () => {
  userIds.set(new Set(['612e8978c1af93207fc97808']));
  render(Example);
  // 执行测试操作
});

2. Mock整个Store模块（隔离场景推荐）

用测试框架的Mock工具（如Jest的jest.mock）替换真实Store，实现完全隔离，避免依赖真实Store的逻辑：

import { writable } from 'svelte/store';
import Example from './example.svelte';

// 全局Mock store.ts模块
jest.mock('./store', () => ({
  userIds: writable(new Set(['612e8978c1af93207fc97808']))
}));

it('some test case', async () => {
  render(Example);
  // 测试逻辑
});

// 也可以在单个测试中动态修改Mock值
it('another test case', async () => {
  import { userIds } from './store';
  (userIds as any).set(new Set(['new-test-id']));
  render(Example);
  // ...
});

3. 依赖注入（优雅组件设计推荐）

通过Svelte的context或可选props实现Store注入，让组件更灵活，测试时轻松替换：

<!-- 修改后的example.svelte -->
<script lang="ts">
  import { userIds as defaultUserIds } from './store';
  import { getContext } from 'svelte';

  // 优先从context获取Store，无则用默认导入
  const userIds = getContext('userIds') || defaultUserIds;

  function storeHandler(ids: Set<string>) {
    return ids;
  }
  $: result = storeHandler($userIds);
</script>

{#each result as item}
    some funky stuff 
{/each}

测试时注入Mock Store：

import { writable } from 'svelte/store';
import Example from './example.svelte';

it('some test case', async () => {
  const mockUserIds = writable(new Set(['612e8978c1af93207fc97808']));
  render(Example, {
    context: new Map([['userIds', mockUserIds]])
  });
  // 测试逻辑
});

总结 #

• 轻量场景下，你当前的直接修改+重置的方式完全规范可行；
• 需要测试隔离时，Mock模块的方式更稳妥；
• 追求组件灵活性时，依赖注入是更优雅的设计；
• 所有方式都要保证测试前后Store状态重置，避免测试间相互影响。

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