Unable to test files with $app/stores import after migrating to new vite.config.js format

Describe the bug

I had previously set up a project with vitest and, after migrating this project to the new vite.config.js I kept getting the error:

[HMR][Svelte] Unrecoverable HMR error in <Header>: next update will trigger a full reload with the following backtrace:

TypeError: Cannot read properties of undefined (reading 'page')
 ❯ getStores .svelte-kit/runtime/app/stores.js:23:22
     21|        return {
     22|                page: {
     23|                        subscribe: stores.page.subscribe
       |                      ^
     24|                },
     25|                navigating: {
 ❯ Object.subscribe .svelte-kit/runtime/app/stores.js:45:17
 ❯ subscribe node_modules/.pnpm/svelte@3.49.0/node_modules/svelte/internal/index.mjs:55:25
 ❯ Module.component_subscribe node_modules/.pnpm/svelte@3.49.0/node_modules/svelte/internal/index.mjs:64:34
 ❯ instance$ src/components/Header.svelte:72:24
 ❯ Module.init node_modules/.pnpm/svelte@3.49.0/node_modules/svelte/internal/index.mjs:1891:11
 ❯ new Header$ src/components/Header.svelte:89:25
 ❯ Module.createProxiedComponent node_modules/.pnpm/svelte-hmr@0.14.12_svelte@3.49.0/node_modules/svelte-hmr/runtime/svelte-hooks.js:341:9
 ❯ new ProxyComponent node_modules/.pnpm/svelte-hmr@0.14.12_svelte@3.49.0/node_modules/svelte-hmr/runtime/proxy.js:242:6
 ❯ new Proxy<Header> node_modules/.pnpm/svelte-hmr@0.14.12_svelte@3.49.0/node_modules/svelte-hmr/runtime/proxy.js:349:11

I assume this has something to do with HMR not working the same now as it did with the old svelte.config.js method but I am not certain.

I tried adding the following to disable HMR in vite but it didn’t change the outcome.

server: {
    hmr: false
},

I’m pretty new to sveltekit and svelte so it’s entirely possible I’m donig something wrong, but given that this worked before the config format change, and doesn’t now, that’s the likely culprit in my mind. Minimal repo that allows you to reproduce the issue is given below

Reproduction

1. Pull https://github.com/illogic-al/store-test
2. Use pnpm i to install dependencies.
3. Run vite test

The error I showed above will be present in the terminal. Again, this was not occurring pre @sveltejs/kit@1.0.0-next.359

Logs

No response

System Info

System:
    OS: macOS 12.4
    CPU: (8) arm64 Apple M1 Pro
    Memory: 199.22 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.11.0 - /usr/local/bin/node
    npm: 8.13.1 - /usr/local/bin/npm
  Browsers:
    Firefox: 101.0.1
    Safari: 15.5
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.59
    @sveltejs/kit: next => 1.0.0-next.372
    svelte: ^3.44.0 => 3.49.0
    vite: ^2.9.13 => 2.9.14

Severity

blocking all usage of SvelteKit

Additional Information

No response

[davipon]

I haven’t used Vitest myself, so don’t have much experience with this. @Davidpon do you have any experience using stuff from $app/stores? It could be a cool thing to demo in svelte-add-vitest

I haven’t tested with runtime modules like $app, but here is a workable solution using vi.mock in order to test Header.svelte in SvelteKit Demo App:

// setupTest.js for Vitest
vi.mock('$app/stores', async () => {
	const { readable, writable } = await import('svelte/store');
	/**
	 * @type {import('$app/stores').getStores}
	 */
	const getStores = () => ({
		navigating: readable(null),
		page: readable({ url: new URL('http://localhost'), params: {} }),
		session: writable(null),
		updated: readable(false)
	});
	/** @type {typeof import('$app/stores').page} */
	const page = {
		subscribe(fn) {
			return getStores().page.subscribe(fn);
		}
	};
	/** @type {typeof import('$app/stores').navigating} */
	const navigating = {
		subscribe(fn) {
			return getStores().navigating.subscribe(fn);
		}
	};
	/** @type {typeof import('$app/stores').session} */
	const session = {
		subscribe(fn) {
			return getStores().session.subscribe(fn);
		}
	};
	/** @type {typeof import('$app/stores').updated} */
	const updated = {
		subscribe(fn) {
			return getStores().updated.subscribe(fn);
		}
	};
	return {
		getStores,
		navigating,
		page,
		session,
		updated
	};
});

BTW, the person you tagged wasn’t me 😅.

[benmccann]

Ah, yeah, that’s why it was working for you. That package provides some mocks: https://github.com/nickbreaton/vitest-svelte-kit/issues/16#issuecomment-1185846147

I’m going to close this as a duplicate of https://github.com/sveltejs/kit/issues/1485, which was asking for the mocking ability