[Storyshoot] SyntaxError: Unexpected token import

[gperdomor]

Issue details

Hi... I have problem when try to configure storyshoot in a project bootstrapped with create-react-appand react-scripts-ts

I'm getting

 FAIL  src/Storyshots.test.ts
  ● Test suite failed to run

    /Users/gperdomor/Developer/clarity-react/src/components/badge/badge.stories.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import React from 'react';
                                                                                             ^^^^^^

    SyntaxError: Unexpected token import

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/ScriptTransformer.js:289:17)
      at node_modules/@storybook/addon-storyshots/dist/require_context.js:39:24
          at Array.forEach (<anonymous>)
      at requireModules (node_modules/@storybook/addon-storyshots/dist/require_context.js:34:9)
      at node_modules/@storybook/addon-storyshots/dist/require_context.js:48:7
          at Array.forEach (<anonymous>)

Steps to reproduce

just crea te a new project create-react-app clarity-react --scripts-version=react-scripts-ts and configure storybook, create a story and configure storyshoot

Please specify which version of Storybook and optionally any affected addons that you're running

├─ @storybook/addon-actions@3.3.4
├─ @storybook/addon-links@3.3.4
├─ @storybook/addon-storyshots@3.3.4
├─ @storybook/addons@3.3.4
├─ @storybook/channel-postmessage@3.3.4
├─ @storybook/channels@3.3.4
├─ @storybook/client-logger@3.3.4
├─ @storybook/components@3.3.4
├─ @storybook/mantra-core@1.7.2
├─ @storybook/node-logger@3.3.4
├─ @storybook/react-komposer@2.0.3
├─ @storybook/react-simple-di@1.3.0
├─ @storybook/react-stubber@1.0.1
├─ @storybook/react@3.3.4
├─ @storybook/ui@3.3.4

[ndelangen]

You could try something like this:
https://www.npmjs.com/package/@std/esm

or this:

https://babeljs.io/docs/usage/babel-register/

[msakrejda]

I ran into exactly the same thing (I'm not using create-react-app, but am using react and typescript), but don't understand your advice @ndelangen. Storybook itself runs fine, and my tests run fine with jest, too (though not using snapshots yet). When I add Storyshots, however, I get the same error message as above (though my existing test suite continues to run fine--it's just the Storyshots suite that fails).

I'm not sure where to add require('babel-register') or why it's needed (given that the Storybook and Jest by themselves run fine).

[igor-dv]

Can you please share you jest config?

[msakrejda]

@igor-dv double-checking my jest config, I realized that our ts-jest was not properly set up to transform our stories. They are not yet in TypeScript (we're still in the process of porting everything), but they do rely on import and other features that typescript provides. When running via Storybook, I think its default babel config is enough for us, but when running via Jest (as with storyshots), we have to configure them to be processed as well. Thanks for pointing me in the right direction.

[msakrejda]

@gperdomor come to think of it, you may have the same problem: make sure that your stories are covered by your ts-jest config.

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 60 days. Thanks!