在Svelte中使用Vitest时，如何Mock $app/environment中的browser值？

你没法直接修改从$app/environment导入的browser变量，因为它是只读导出变量。要在Vitest中动态切换这个值，得用模块Mock的方式实现。

具体实现步骤 #

在测试文件中，通过Vitest的vi.mock方法模拟整个$app/environment模块，同时创建一个可修改的中间对象来动态控制browser的值：

修改后的users.test.ts代码：

import { describe, it, expect, vi } from "vitest";
import { isAdmin } from "./users";

// 创建可修改的mock容器，用来控制browser的值
const mockEnv = {
  browser: false
};

// 模拟$app/environment模块，用getter返回mock容器的值
vi.mock('$app/environment', () => ({
  get browser() {
    return mockEnv.browser;
  }
}));

describe('isAdmin', () => {
    it('should throw an error when called on the client side', () => {
        // 切换为客户端环境
        mockEnv.browser = true;
        expect(() => isAdmin("")).toThrowError('isAdmin should not be called on the client side');
    });

    it('should not throw when called from server', () => {
        // 切换为服务端环境
        mockEnv.browser = false;
        expect(() => isAdmin("")).not.toThrow();
    });
});

为什么用这种方式？ #

直接导出静态值的Mock没法在测试用例之间动态切换，而用getter的方式可以让我们在每个测试用例中灵活修改browser的值，满足不同场景的测试需求。

额外配置（按需添加） #

如果你的项目是纯Svelte项目（非SvelteKit），需要在vitest.config.ts中配置别名，确保Vitest能正确解析$app/environment模块：

import { defineConfig } from 'vitest/config';
import { svelte } from '@sveltejs/vite-plugin-svelte';

export default defineConfig({
  plugins: [svelte()],
  test: {
    environment: 'jsdom', // 根据测试场景选择jsdom或node
  },
  resolve: {
    alias: {
      '$app/environment': './node_modules/@sveltejs/kit/src/runtime/app/environment.js',
    }
  }
});

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