create-react-app

[lifeiscontent]

When using a default create-react-app for storyshots, it seems to break.

I've got this code in src/Storyshots.test.js

import initStoryshots from 'storyshots';
initStoryshots();

the error in the test is

Test suite failed to run

    evalmachine.<anonymous>:1
    (function (exports, require, module, __filename, __dirname) { import { configure } from '@kadira/storybook';
                                                                  ^^^^^^
    SyntaxError: Unexpected token import

[lifeiscontent]

figured it out, I needed a .babelrc that reflected the same presets as create react app

[roonyh]

Glad it works! storyshots comes pre transpiled. So I think this is unrelated to storyshots. Anyway reopen if needed.

[kedoska]

I have the same issue.
@lifeiscontent where did you set up the .babelrc?

in my __tests__ directory i have one file, storyshots.js

import initStoryshots from 'storyshots'
initStoryshots({
  suit: 'ComponentStories'
})

when i run npm run test-storybook everything works just fine
but, when i run npm test or, in my case CI=true npm test it fails like this

my project was created with create-react-app

[Fatxx]

Any solution here? Get in the same error

[Fatxx]

Could this issue be related to the command react-scripts test --env=jsdom ? Which we use to run tests?

[marc-rutkowski]

@kedoska, @Fatxx, as mentioned by @lifeiscontent, providing a basic .babelrc file (containing the following snippet) into the project root folder, solves the problem.

{
  "presets": ["es2015", "react"]
}

Let us know if it works for you.

[irnc]

Please have a look at #67 (review) which added code related to babel config. The root cause for that issue seems to be in usage of babelConfig variable before its declaration.

[baptistemanson]

We were not able to get storyshots working at the same time as storybook and create-react-app using the workaround.
:(.

[irnc]

@baptistemanson For a workaround, you could move from ES6 to ES5 in .storybook/config.js, i.e. use requite instead of import, so unconfigured Babel would just pass without an error on unknown syntax.

Note, that original error is about unknown syntax in .storybook/config.js, not in Storyshots.test.js.