How do you mock $env/static/public when using the Sveltekit framework?

[alexbjorlig]

Summary

According to this this page, it should be possible to mock $env-static-publicin storybook when using Sveltekit framework.

I have tried with this:

parameters: {
        sveltekit_experimental: {
            stores: {
                page: {
                    url: 'ole-birk',
                },
            },
            navigation: {
                invalidateAll: () => console.log(`invalidateAll called`),
                beforeNavigate: () => console.log(`beforeNavigate called`),
                afterNavigate: () => ({ foo: 'bar' }),
            },
            env: {
                static: {
                    public: {
                        PUBLIC_UPLOADCARE_CDN: 'ole',
                    },
                },
            },
            static: {
                public: {
                    PUBLIC_UPLOADCARE_CDN: 'ole',
                },
            },
        },
    },

but it does not seem to work.

Additional information

No response

Create a reproduction

No response

[ndelangen]

@JReinhold Can you check this?

[JReinhold]

"Supported" means that it doesn't break anything and that it reads the same values as your SvelteKit application does. It does not mean that you can mock it, only the properties listed in the How To Mock section are mockable.

I'm open to suggestions if you think the support-table can be clearer about this.

Can you describe the use case for needing to define different env vars on a per-story basis?

[JReinhold]

If your use case is just to set a general environment variable for all stories, check out these docs: https://storybook.js.org/docs/configure/environment-variables

[alexbjorlig]

Ok, thanks so much. I will do some experiments :)

[rChaoz]

In my case, I kept getting this error: globalThis.__sveltekit_dev is undefined (in dev), or globalThis.__sveltekit_<some-hash> is undefined (when built), as this is where dynamic variables are stored in SvelteKit, so Storyook wasn't even starting up.
However, as $env/... is a virtual module, you can provide it yourself. This allows you to fix the error above, by providing an empty object, or by providing your own (mock) environment variables. This is the code that needs to be added to .storybook/main.ts:

import type { StorybookConfig } from "@storybook/sveltekit"
import { type InlineConfig } from "vite"

const config: StorybookConfig = {
    // ... other options ...
    viteFinal(config): InlineConfig {
        return {
            ...config,
            plugins: [
                {
                    name: "mockSvelteKitEnvDynamicPublic",
                    load(id: string) {
                        if (id === "\0virtual:$env/dynamic/public") return "export const env = {}"
                    },
                },
                ...(config.plugins ?? []),
            ],
        }
    },
}
export default config

The magin line is if (id === "\0virtual:$env/dynamic/public") return "...". This line returns the JavaScript code of the virtual module, i.e. the module you are importing with $env/dynamic/public. You can put whatever you want here, for example:

if (id === "\0virtual:$env/dynamic/public") return `
export const env = {
    MY_ENV_VAR: "123",
    OTHER_VAR: "test",
    // ...
}
`

You can of course also mock any other virtual module the same way. You can even customize the values per-story like so:

if (id === "\0virtual:$env/dynamic/public") return `
export const env = {}
globalThis.mockEnv = env
`

Then use window.mockEnv.MY_ENV_VAR = "123" before your story renders, like with a decorator.

[alexhladun-orennia]

I had more luck with

  async viteFinal(config) {
    return mergeConfig(config, {
      resolve: {
        alias: {
          '$env/dynamic/public': path.resolve(__dirname, 'mocks/env.public.js'),
        },
      },
    });

And creating the mock file:

//env.public.js
// Make storybook happy, as '$env/dynamic/public' is not defined in storybook
// You can also override env vars here for testing.
export const env = {};