如何对Svelte 5 Runes进行单元测试？响应性失效问题排查

直接在测试函数顶层使用$state和$derived不会触发响应性更新，因为Runes API必须运行在Svelte的响应性上下文中，普通测试函数没有这个环境。以下是两种可行的解决方式：

方式一：用$run创建响应性作用域 #

$run是Svelte 5提供的API，专门用来在非组件环境中启动响应性上下文，让$state和$derived能正常工作。

修改测试文件如下：

import { $run, $state, $derived } from 'svelte';

test('Counter', () => {
    let derivedValue;
    
    $run(() => {
        const count = $state(0);
        const double = $derived(count * 2);
        
        count = 5;
        derivedValue = double;
    });

    expect(derivedValue).toEqual(10);
});

$run包裹的代码块会进入响应性作用域，当count更新时，$derived会自动重新计算值，最终能得到预期的10。

方式二：挂载Svelte组件测试（更贴近真实场景） #

如果你的逻辑原本就属于组件，直接挂载组件测试响应性会更符合实际使用场景：

1. 先创建测试用的组件（比如Counter.svelte）：

<script lang="ts">
    export let count = $state(0);
    export const double = $derived(count * 2);
</script>

2. 编写测试文件：

import { render } from '@testing-library/svelte';
import Counter from '$lib/Counter.svelte';

test('Counter derived value updates', async () => {
    const { component } = render(Counter, { count: 0 });
    
    // 更新组件的state值
    component.count = 5;
    // 等待Svelte完成响应性更新
    await component.$settle();
    
    expect(component.double).toEqual(10);
});

这种方式模拟了真实组件的运行环境，能更准确地测试响应性逻辑的实际表现。

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