Browser Component Testing options with Svelte

[SteveALee]

Summary

Exploring the testing docs for Svelte and the new experimental test addon (vitest Browser Mode) I have questions.

I want to run some basic component tests in the browser and they need to run setup code to configure (or Mock) the Web Audio, local storage and other browser context (plus clean up after).

• I think the story play() functions run Testing Library assertions in the browser? It's not crystal clean.
• Docs say both that play() runs after story is rendered and also you can use the mount() function to run code pre and post render?? It's not clear from examples which mount() is used to do this. What in Svelte 5?
• It seems the new experimental vitest Browsr Mode addon runs some sort of auto tests - is there an outline of what these actually are?
• The experimental addon also runs story play() functions. But are they existing Test LIbrary asserts or does it use vitest browser mode locators and assertions? (hope so).
• Looking at ways to run setup code before play functions I see some options are Decorators (not sure how they work in Svelte CSF), Higher order Components, hacking code into the Svlete CSF Story template, or testing fixture features like beforeAll(). I can't see a function to run before stories all in a file. Is there one (and clean up)? Can we guarentee clean up code runs when there are errors in tests or are we left in an indeterminate state?

Thanks for any insights

Additional information

No response

Create a reproduction

No response

[SteveALee]

@JReinhold can you provide any pointers to above questions.

I think my confusion stems from arriving in the middle of churn and docs in various places.

My main question is do play functions in the svelte csf use testing libray abstractions as shown in https://storybook.js.org/docs/writing-tests/component-testing#write-a-component-test or the new viteest browser mode abstractions of playwrights locators etc as the latest experimental test addon docs indicate. I guess i can experiment but it's not clear what is supported going forward.

Thanks.

[shilman]

It's based on Storybook's abstractions in @storybook/test since our code can both run in Vitest and in the user's browser, whereas Vitest browser mode can only run in Vitest. We may revisit this in the future in some way, but for now it is the way it is. 😄 Hope that helps!

[SteveALee]

Thanks. I just needed to know which it is. What about my other Qs.

Can we use mount in play etc... what are the magic auto smoke test? Erc

Thanks so much.

[shilman]

I'll let @JReinhold field those since they mostly seem Svelte CSF-related and I don't know the answers off the top of my head unfortunately (I should!)

[JReinhold]

I'll try to answer the best that I can.

• I think the story play() functions run Testing Library assertions in the browser? It's not crystal clean.

Correct. When you import from @storybook/test, you're using Testing Library, as we wrap that. This is mostly documented here:

https://storybook.js.org/docs/essentials/interactions#write-a-component-test
https://storybook.js.org/docs/writing-tests/component-testing

• Docs say both that play() runs after story is rendered and also you can use the mount() function to run code pre and post render?? It's not clear from examples which mount() is used to do this. What in Svelte 5?

The mount() to use is the one you get from the play-function, not something you import. This should work with Svelte CSF, but I haven't validated that, so honestly I don't know. Give it a try!

You can see an example of the mount() usage here:

https://storybook.js.org/docs/writing-tests/component-testing#run-code-before-the-component-gets-rendered

In Svelte CSF it would be something like this:

<script module lang="ts">
  import { defineMeta } from '@storybook/addon-svelte-csf';

  import Button from './components/Button.svelte';

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

{#snippet template(args: Args<typeof Story>, context: StoryContext<typeof Story>)}
  <Button {...args}>{'Click me'}</Button>
{/snippet}

<Story name="Primary" play={async ({ mount }) => {
  // stuff before mounting the story
  await mount();

  // stuff after mounting
}} />

Depending on your use case, if you need the same mock across all stories in the file, you could also use beforeEach on the defineMeta instead: https://storybook.js.org/docs/writing-tests/component-testing#run-code-before-each-story-in-a-file

• It seems the new experimental vitest Browsr Mode addon runs some sort of auto tests - is there an outline of what these actually are?

By default, when you run tests on stories with the Vitest integration, it will visit and render all of your stories, like a smoke-test. So it doesn't do anything other than rendering them, ensuring that rendering your stories works without errors. As soon as you add play-functions to your stories, they will be executed too.

• The experimental addon also runs story play() functions. But are they existing Test LIbrary asserts or does it use vitest browser mode locators and assertions? (hope so).

Similar to the first answer, it uses Testing Library, it runs whatever you put into the play-function, and right now you can't put browser-level locators and assertions from Playwright.

I assume you're talking about the @vitest/browser/context API described in https://vitest.dev/guide/browser/context.html , but we don't support that yet. The reason is, that play-functions also run when you visit the story manually in the UI, and since that runs in the browser, you can't import Node-imports because that wouldn't work in the browser.

• Looking at ways to run setup code before play functions I see some options are Decorators (not sure how they work in Svelte CSF), Higher order Components, hacking code into the Svlete CSF Story template, or testing fixture features like beforeAll(). I can't see a function to run before stories all in a file. Is there one (and clean up)? Can we guarentee clean up code runs when there are errors in tests or are we left in an indeterminate state?

What you're looking for might be beforeEach? Depends on what you want to achieve.

https://storybook.js.org/docs/writing-tests/component-testing#run-code-before-each-story-in-a-file

If you have a real use case and you can share some code, maybe I can help out with that specific example to give you some ideas.

[SteveALee]

Super smooth install experience of the test addon. Nice one.

[JReinhold]

Storybook doesn't work in the Svelte playground, the playground is way to simplistic for that, Storybook needs its own environment.

[JReinhold]

Unfortunately it seems that mount() does not yet work in Svelte CSF. 😞

storybookjs/addon-svelte-csf#270

[SteveALee]

Storybook doesn't work in the Svelte playground, the playground is way to simplistic for that, Storybook needs its own environment.

Ah, I think I saw they'd moved it to the wonderful stackblitz, but thinking more that might not be enough if they still mainly support node serverside. And I guess headless chromium for browser mode is difficult.

[SteveALee]

Unfortunately it seems that mount() does not yet work in Svelte CSF. 😞

storybookjs/addon-svelte-csf#270

Thanks for heads-up. Was going to explore today. Will watch that issue, and maybe poke around a bit.