How to import +page.svelte to test

[simonhackler]

I am currently running svelte 5 and this addon in the next branch. Is it possible to import a +page.svelte to storybook somehow?

[xeho91]

It should not be difficult to import the component (of the +page.svelte) itself. Like this:

<!-- ./stories/page.stories.svelte -->
<script module>
import Page from "../routes/+page.svelte";

const { Story } = defineMeta({
  component: Page,
});
</script>

However, if inside this page component you use some of SvelteKit features, you might have to mock them.

EDIT. And one more thing. For SvelteKit integration you have to use @storybook/sveltekit package as renderer inside .storybook/main.js instead of @storybook/svelte-vite.

[simonhackler]

Thank you for your quick answer
I am always getting this error:

ReferenceError: Page is not defined
at http://localhost:6006/src/routes/+page.svelte:33:27

here is my main.ts

   import type { StorybookConfig } from '@storybook/sveltekit';

const config: StorybookConfig = {
	stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|ts|svelte)'],
	addons: [
		'@storybook/addon-svelte-csf',
		'@storybook/addon-essentials',
		'@chromatic-com/storybook',
		'@storybook/addon-interactions'
	],
	framework: {
		name: '@storybook/sveltekit',
		options: {}
	}
};
export default config;

and my preview.ts. I tried to import Preview from @storybook/sveltekit but it does not export it.

import type { Preview } from '@storybook/svelte';
import '../src/app.pcss'; // replace with the name of your tailwind css file

const preview: Preview = {
	parameters: {
		controls: {
			matchers: {
				color: /(background|color)$/i,
				date: /Date$/i
			}
		}
	}
};

export default preview;

Here is my minmal test:

<script module>
	import { defineMeta } from '@storybook/addon-svelte-csf';
	import Page from '../routes/test/+page.svelte';

	const { Story } = defineMeta({
		title: 'Example/signIn',
		component: Page
	});
</script>

<Story name="Sign up" />

The page here is just a simple h1 with text. I tried importing +page.svelte file inside of my sveltekit app and it worked.
So I feel like it is like you said related to the renderer. However I can't find out how to change it to sveltekit. Search through all the docs.
Am I missing something obvious here?
Thanks again.

[xeho91]

Honestly, I don't see anything off in what you wrote there so far. BTW, you can add language after three back ticks for the code snippets. e.g. svelte, so it adds syntax highlights which would make it easier to read these code snippets.

The error message you have provided is too cryptic and short. It seems unrelated to what I see. Could be parsing issue, but I need more info. Any chance you can provide a reproduction?

[simonhackler]

https://github.com/simonhackler/Storybook-reproduction

This is a blank sveltekit project setup with storybook. I create one story inside src/stories/Page.stories.svelte where I import from '..routes/+page.svelte'.

I am getting the same error there.

[JReinhold]

Thanks for the reproduction @simonhackler! I've identified it as a bug in core Storybook and reported it here: storybookjs/storybook#29636

I can't come up with an easy workaround right now, unfortunately.

[simonhackler]

Thank you for taking the time to go through the issue. I was going crazy thinking I did something wrong.