[Bug] Does not find svelte stories

[IanVS]

trafficstars

Describe the bug

I've just added @storybook/test-runner to the storybook-builder-vite, and found that tests are not running correctly on our svelte example project. I get the following message:

YN0000: No tests found, exiting with code 1
Run with `--passWithNoTests` to exit with code 0
In /home/runner/work/storybook-builder-vite/storybook-builder-vite/examples/svelte
   22 files checked.
   testMatch: /home/runner/work/storybook-builder-vite/storybook-builder-vite/examples/svelte/stories/**/*.stories.mdx, /home/runner/work/storybook-builder-vite/storybook-builder-vite/examples/svelte/stories/**/*.stories.@(js|jsx|ts|tsx|svelte) - 0 matches
   testPathIgnorePatterns: /node_modules/ - 22 matches
   testRegex:  - 0 matches
Pattern:  - 0 matches
ERROR: "test" exited with 1.

This can be seen in a CI run here: https://github.com/eirslett/storybook-builder-vite/runs/5538433882?check_suite_focus=true#step:7:47

Steps to reproduce the behavior

1. Clone the storybook-builder-vite repo
2. git checkout storybook-test-ci
3. yarn install
4. cd examples/svelte
5. yarn build-storybook
6. yarn test-ci

Expected behavior

I expect that the stories are found, and tests are run correctly.

Additional context

We are using svelte component stories, maybe the test-runner does not support them? I didn't see any notes or issues about it yet, though.

[IanVS]

Alright, I dug into this just a bit. I needed to update the jest-playwright.js to:

1. Add '^.+\\.svelte$': ['jest-transform-svelte', { preprocess: sveltePreprocess() }] to transform.
2. Add '^.+\\.stories\\.svelte$': '@storybook/test-runner/playwright/transform' to transform. <- this breaks
3. Add "svelte" to moduleFileExtensions <- this is the initial cause of seeing "No tests found"

Then, my tests are picked up and attempt to run. However, it seems that the call to loadCsf() in transformCsf.js is choking on the non-jsx syntax of svelte. I'm not sure what to do about that, but maybe this gives a bit of a clue for someone who might?

[benbender]

Hey @IanVS,

I also gave it a quick shot and identified some improvements:

1. "^.+\\.svelte$": ["svelte-jester", { preprocess: true }], - svelte-jester instead of jest-transform-svelte as the latter is outdated
2. Add transformIgnorePatterns: ["(?=.*node_modules)(?!.*(@storybook/svelte|@storybook/addon-svelte)).*"], as the storybook-svelte-packages include svelte-templates which must be transformed (and aren't per default)

With those two changes it parses the svelte-stories successfully, but can't find any tests afterwards... So one step further but not done yet.

[shilman]

The problem is that the test runner actually analyzes the AST of CSF files. Adding svelte support will just bloat the test runner and is not feasible. It's a similar problem to adding MDX support. You can find the workaround, which is to use --stories-json mode, here: https://github.com/storybookjs/test-runner/issues/36

[IanVS]

Hmmmmm, I think it might be a bug, but when I use buildStoriesJson in a svelte project, none of the svelte-native stories actually appear in the stories.json file. Only the introduction page (which is mdx).

Edit: looks like it is probably due to this: https://github.com/storybookjs/storybook/blob/552b0d3f6c23486e603a304439639f69facad40d/lib/core-server/src/utils/StoryIndexGenerator.ts#L51-L54

[shilman]

My bad @IanVS -- indeed we don't generate stories.json for svelte stories, so for now the test runner doesn't work with svelte. 😢 I don't see us adding support to the test runner. We could conceivably add it to stories.json although I don't want to commit to it yet.

[IanVS]

No worries, I just wanted to be sure I understood what was going on. I think it would be a good idea to clearly state in the README which kinds of stories / formats the tool supports, just to avoid any confusion.

[shilman]

Solution in progress here https://github.com/storybookjs/addon-svelte-csf/issues/65

[DzmVasileusky]

@shilman seems like related bug https://github.com/storybookjs/test-runner/issues/229 same for Angular + mdx stories I guess?

[yannbf]

For posterity, seems like v2.0.9 of addon-svelte-csf got released containing a story indexer for .svelte stories, which means this probably works now?

[IanVS]

@yannbf that was accidental, and was reverted in 2.0.10. To use the story indexer, it's necessary to use storybook 7 and version 3.0.0-next.x of the addon. But yes, this can be closed out now.