Storybook: Storyshots Jest example configuration throws error on Import

Created on 17 Apr 2017  ·  2Comments  ·  Source: storybookjs/storybook

Went through the details on https://github.com/storybooks/storybook/tree/master/packages/storyshots and followed it through.

No love with the configuration it details.

`Configure your app for Jest

Usually, you might already have completed this step. If not, here are some resources for you.

If you are using Create React App, it's already configured for Jest. You just need to create a filename with the extension .test.js.
Otherwise check this Egghead lesson.
Configure Storyshots

Create a new test file with the name Storyshots.test.js. (Or whatever the name you prefer). Then add following content to it:

import initStoryshots from 'storyshots';
initStoryshots();
That's all.

Now run your Jest test command. (Usually, npm test.) Then you can see all of your stories are converted as Jest snapshot tests.`

FAIL .\Storyshots.test.js
● Test suite failed to run

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

  at createScript (vm.js:56:10)
  at Object.runInThisContext (vm.js:97:10)
  at runWithRequireContext (node_modules\storyshots\dist\require_context.js:103:37)
  at testStorySnapshots (node_modules\storyshots\dist\index.js:72:35)
  at Object.<anonymous> (Storyshots.test.js:2:52)

Test Suites: 1 failed, 1 passed, 2 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 3.412s
Ran all test suites.

needs reproduction question / support

Most helpful comment

I'm running into exactly this issue. For the record, I'm not using CRA. I created a .babelrc file in .storybook with exactly what was suggested. It made no difference. Is there some other thing I need to do to get babel to pay attention to that file?

All 2 comments

You can fix this by creating a .babelrc file in .storybook folder with the same presets create-react-app uses:

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

Should this kind of babel config become the kind of default? If not, we should definitely document it.

Edit: closing it, duplicate of #880.

I'm running into exactly this issue. For the record, I'm not using CRA. I created a .babelrc file in .storybook with exactly what was suggested. It made no difference. Is there some other thing I need to do to get babel to pay attention to that file?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

arunoda picture arunoda  ·  3Comments

tomitrescak picture tomitrescak  ·  3Comments

shilman picture shilman  ·  3Comments

zvictor picture zvictor  ·  3Comments

ZigGreen picture ZigGreen  ·  3Comments