Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug] how to use svelte csf with storyshots? #35

Closed
01oseluiz opened this issue Oct 25, 2021 · 1 comment
Closed

[Bug] how to use svelte csf with storyshots? #35

01oseluiz opened this issue Oct 25, 2021 · 1 comment
Labels
bug Something isn't working

Comments

@01oseluiz
Copy link

Describe the bug

I'am using svelte to describe my stories, but storyshots doesn't work with this syntax, only works with .js and .ts files.

Steps to reproduce the behavior

  1. using this template https://github.com/chromaui/intro-storybook-svelte-template
  2. install storyshots following what is described here: https://storybook.js.org/tutorials/intro-to-storybook/svelte/en/simple-component/
  3. add "^.+\\.stories\\.svelte$": "@storybook/addon-svelte-csf/dist/cjs/jest-transform" to the jest transform map
  4. run npm test storybook.test.js

Here is an example Repo: https://github.com/01oseluiz/svelte-csf-storyshots

Expected behavior

It is expected that storyshots takes a snapshot of the 'Button.stories.svelte '. But only 'Button.stories.js' is working.

Screenshots and/or logs

 console.warn
    Unexpected error while loading ./stories/Button.stories.svelte: SyntaxError: Unexpected token '<'

      at Object.warn (node_modules/@storybook/client-logger/dist/cjs/index.js:67:65)
      at node_modules/@storybook/core-client/dist/cjs/preview/loadCsf.js:92:34
          at Array.forEach (<anonymous>)
      at node_modules/@storybook/core-client/dist/cjs/preview/loadCsf.js:85:20
          at Array.forEach (<anonymous>)
      at node_modules/@storybook/core-client/dist/cjs/preview/loadCsf.js:84:12
      at ConfigApi.configure (node_modules/@storybook/client-api/dist/cjs/config_api.js:26:7)
 PASS  ./storybook.test.js
  Storyshots
    Example/Button-js
      ✓ Large (16 ms)
      ✓ Primary (4 ms)
      ✓ Secondary (4 ms)
      ✓ Small (4 **ms)**

Environment

Environment Info:

  System:
    OS: Linux 5.10 Ubuntu 20.04.3 LTS (Focal Fossa)
    CPU: (4) x64 Intel(R) Core(TM) i5-7300HQ CPU @ 2.50GHz
  Binaries:
    Node: 12.16.1 - ~/.asdf/installs/nodejs/12.16.1/bin/node
    Yarn: 1.22.10 - /home/linuxbrew/.linuxbrew/bin/yarn
    npm: 6.13.4 - ~/.asdf/installs/nodejs/12.16.1/bin/npm
  npmPackages:
    @storybook/addon-actions: ^6.3.12 => 6.3.12 
    @storybook/addon-essentials: ^6.3.12 => 6.3.12 
    @storybook/addon-links: ^6.3.12 => 6.3.12 
    @storybook/addon-svelte-csf: ^1.1.0 => 1.1.0 
    @storybook/svelte: ^6.3.12 => 6.3.12 

Additional context

Add any other context about the problem here.

@01oseluiz 01oseluiz added the bug Something isn't working label Oct 25, 2021
@j3rem1e
Copy link
Contributor

j3rem1e commented Nov 13, 2021

This project has a demo storybook which uses jest and storyshot. You can look at the jest configuration.

@j3rem1e j3rem1e closed this as completed Dec 5, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants