Search code examples
sveltesveltekitvitest

In Svelte with Vitest is there a way to mock the browser value in $app/environment


Seems like there should be a way to modify the value of browser. Typescript doesn't allow assignment eg browser = true; yielding error: Cannot assign to 'browser' because it is an import.ts(2632)

users.test.ts

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


describe('isAdmin', () => {
    it('should throw an error when called on the client side', () => {
        expect(() => isAdmin("")).toThrowError('isAdmin should not be called on the client side');
    });
    it('should not throw when called from server', () => {
        expect(() => isAdmin("")).not.toThrow();
    });
    
});

users.ts

import { browser } from '$app/environment';

/**
 * System admin
 * @param userEmail 
 * @returns true if user is admin and can manage all events
 */
export const isAdmin = (userEmail: string) => {
    if (browser) {
        throw new Error('isAdmin should not be called on the client side');
    }
    //...
    return false;
}

Solution

  • It seems like your goal is to forbid the function from being used on the client. Instead of using browser, I would use Server-only modules.