如何仅在Vitest测试中暴露Svelte组件的私有prop或method？

我知道可以用accessors: true动态访问组件props，但现在需要让组件内的私有属性/方法只在Vitest运行时暴露，完全不希望组件使用者看到它们。

示例组件（MyComponent.svelte） #

<script>
    import { AnotherComplicatedApi } from 'external-package';
    const privateProp = new AnotherComplicatedApi();
</script>

示例Vitest测试代码 #

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

test('privateApi was initialised properly', () => {
    const { component } = render(MyComponent);
    // 这里会失败，因为component.privateProp不存在
    expect(component.privateProp.someMethod()).toBeTruthy();
});

解决方法 #

方法1：通过环境变量条件挂载私有属性 #

直接在组件里判断测试环境，只在Vitest运行时把私有属性绑定到组件实例上，生产环境完全隐藏。修改组件代码：

<script>
    import { AnotherComplicatedApi } from 'external-package';
    const privateProp = new AnotherComplicatedApi();

    // 仅在Vitest测试环境暴露私有属性
    if (import.meta.env.VITEST) {
        Object.assign(this, { privateProp });
    }
</script>

改完之后，原测试代码不用动就能正常访问component.privateProp，组件使用者在生产环境完全看不到这个属性。

方法2：条件编译导出测试专用属性 #

如果不想直接操作this，可以用Svelte的条件编译语法，只在测试环境导出一个明确标识为测试用的属性：

<script>
    import { AnotherComplicatedApi } from 'external-package';
    const privateProp = new AnotherComplicatedApi();

    // 仅在Vitest环境导出测试专用属性
    #if VITEST
        export let __test_privateProp = privateProp;
    #endif
</script>

对应的测试代码要改成访问这个测试专用属性：

test('privateApi was initialised properly', () => {
    const { component } = render(MyComponent);
    expect(component.__test_privateProp.someMethod()).toBeTruthy();
});

这种方式需要确保Svelte预处理器启用了条件编译，而且属性名最好带__test前缀，避免和业务props冲突。

注意事项 #

• 方法1是更推荐的方案，不会污染组件的props列表，逻辑也更简洁
• Vitest默认会自动注入VITEST环境变量，不用额外配置
• 绝对不要在生产环境暴露私有属性，避免使用者依赖组件内部实现，增加后续维护成本

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