StoryShots "default" test fails to run for new React project

[seancmw-fly-me]

Describe the bug
Trying to run the provided test on the structural testing page of the storybook website (https://storybook.js.org/testing/structural-testing/) fails with the error
SyntaxError: Unexpected identifier
pointing at
initStoryshots

To Reproduce
Steps to reproduce the behavior:

1. In an empty directory, run yarn init, with default options.
2. Run npx -p @storybook/cli sb init.
3. Say that you want to manually choose a Storybook project type, and select React.
4. Enter yarn run storybook or npm run storybook. Either should be successful, and open the demo storybook page in a browser.
5. Run npm i -D @storybook/addon-storyshots
6. Run npm i jest
7. Add jest to scripts section in package.json (see 'Code snippets' section for full package.json contents).
8. Create a file called 'storyshots.test.js' in the root directory.
9. Make its contents match the provided test code from the URL above (see code snippets section for exact code block).
10. Run yarn test or npm run test.
11. Error shown.

Expected behavior
storyshots.test.js to pass.

Screenshots

Code snippets
Contents of package.json:

{
  "name": "temp",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "jest": "^24.1.0"
  },
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@storybook/addon-actions": "^4.1.11",
    "@storybook/addon-links": "^4.1.11",
    "@storybook/addon-storyshots": "^4.1.11",
    "@storybook/addons": "^4.1.11",
    "@storybook/react": "^4.1.11",
    "babel-loader": "^8.0.5"
  },
  "scripts": {
    "test": "jest",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  }
}

Contents of storyshots.test.js:

import initStoryshots from '@storybook/addon-storyshots';

initStoryshots({ /* configuration options */ });

System:

• OS: Ubuntu MATE 18.10
• Version: See "Code snippets" section for versions.

[Keraito]

Hey @seancmw-fly-me, that doesn't sound right. Could you do/try the following things for me:

1. Post the entire error/stack trace so we could take a closer look.
2. Try moving the storyshots.test.js into either a src folder or into the stories folder and see whether it works that way.

[seancmw-fly-me]

debug log produced by npm (my last name from the username redacted)

0 info it worked if it ends with ok
1 verbose cli [ '/home/sredacted/.nvm/versions/node/v11.9.0/bin/node',
1 verbose cli   '/home/sredacted/.nvm/versions/node/v11.9.0/bin/npm',
1 verbose cli   'run',
1 verbose cli   'test' ]
2 info using npm@6.5.0
3 info using node@v11.9.0
4 verbose run-script [ 'pretest', 'test', 'posttest' ]
5 info lifecycle storybook-sandbox@1.0.0~pretest: storybook-sandbox@1.0.0
6 info lifecycle storybook-sandbox@1.0.0~test: storybook-sandbox@1.0.0
7 verbose lifecycle storybook-sandbox@1.0.0~test: unsafe-perm in lifecycle true
8 verbose lifecycle storybook-sandbox@1.0.0~test: PATH: /home/sredacted/.nvm/versions/node/v11.9.0/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/home/sredacted/code/storybook-sandbox/node_modules/.bin:/home/sredacted/.nvm/versions/node/v11.9.0/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin:/usr/lib/jvm/java-8-oracle/bin:/usr/lib/jvm/java-8-oracle/db/bin:/usr/lib/jvm/java-8-oracle/jre/bin
9 verbose lifecycle storybook-sandbox@1.0.0~test: CWD: /home/sredacted/code/storybook-sandbox
10 silly lifecycle storybook-sandbox@1.0.0~test: Args: [ '-c', 'jest' ]
11 silly lifecycle storybook-sandbox@1.0.0~test: Returned: code: 1  signal: null
12 info lifecycle storybook-sandbox@1.0.0~test: Failed to exec test script
13 verbose stack Error: storybook-sandbox@1.0.0 test: `jest`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (/home/sredacted/.nvm/versions/node/v11.9.0/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:301:16)
13 verbose stack     at EventEmitter.emit (events.js:197:13)
13 verbose stack     at ChildProcess.<anonymous> (/home/sredacted/.nvm/versions/node/v11.9.0/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:197:13)
13 verbose stack     at maybeClose (internal/child_process.js:978:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:265:5)
14 verbose pkgid storybook-sandbox@1.0.0
15 verbose cwd /home/sredacted/code/storybook-sandbox
16 verbose Linux 4.18.0-15-generic
17 verbose argv "/home/sredacted/.nvm/versions/node/v11.9.0/bin/node" "/home/sredacted/.nvm/versions/node/v11.9.0/bin/npm" "run" "test"
18 verbose node v11.9.0
19 verbose npm  v6.5.0
20 error code ELIFECYCLE
21 error errno 1
22 error storybook-sandbox@1.0.0 test: `jest`
22 error Exit status 1
23 error Failed at the storybook-sandbox@1.0.0 test script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

Moving storyshots.test.js into the stories folder produces a similar, if not the same, error

0 info it worked if it ends with ok
1 verbose cli [ '/home/sredacted/.nvm/versions/node/v11.9.0/bin/node',
1 verbose cli   '/home/sredacted/.nvm/versions/node/v11.9.0/bin/npm',
1 verbose cli   'run',
1 verbose cli   'test' ]
2 info using npm@6.5.0
3 info using node@v11.9.0
4 verbose run-script [ 'pretest', 'test', 'posttest' ]
5 info lifecycle storybook-sandbox@1.0.0~pretest: storybook-sandbox@1.0.0
6 info lifecycle storybook-sandbox@1.0.0~test: storybook-sandbox@1.0.0
7 verbose lifecycle storybook-sandbox@1.0.0~test: unsafe-perm in lifecycle true
8 verbose lifecycle storybook-sandbox@1.0.0~test: PATH: /home/sredacted/.nvm/versions/node/v11.9.0/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/home/sredacted/code/storybook-sandbox/node_modules/.bin:/home/sredacted/.nvm/versions/node/v11.9.0/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin:/usr/lib/jvm/java-8-oracle/bin:/usr/lib/jvm/java-8-oracle/db/bin:/usr/lib/jvm/java-8-oracle/jre/bin:/usr/lib/jvm/java-8-oracle/bin:/usr/lib/jvm/java-8-oracle/db/bin:/usr/lib/jvm/java-8-oracle/jre/bin
9 verbose lifecycle storybook-sandbox@1.0.0~test: CWD: /home/sredacted/code/storybook-sandbox
10 silly lifecycle storybook-sandbox@1.0.0~test: Args: [ '-c', 'jest' ]
11 silly lifecycle storybook-sandbox@1.0.0~test: Returned: code: 1  signal: null
12 info lifecycle storybook-sandbox@1.0.0~test: Failed to exec test script
13 verbose stack Error: storybook-sandbox@1.0.0 test: `jest`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (/home/sredacted/.nvm/versions/node/v11.9.0/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:301:16)
13 verbose stack     at EventEmitter.emit (events.js:197:13)
13 verbose stack     at ChildProcess.<anonymous> (/home/sredacted/.nvm/versions/node/v11.9.0/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:197:13)
13 verbose stack     at maybeClose (internal/child_process.js:978:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:265:5)
14 verbose pkgid storybook-sandbox@1.0.0
15 verbose cwd /home/sredacted/code/storybook-sandbox
16 verbose Linux 4.18.0-15-generic
17 verbose argv "/home/sredacted/.nvm/versions/node/v11.9.0/bin/node" "/home/sredacted/.nvm/versions/node/v11.9.0/bin/npm" "run" "test"
18 verbose node v11.9.0
19 verbose npm  v6.5.0
20 error code ELIFECYCLE
21 error errno 1
22 error storybook-sandbox@1.0.0 test: `jest`
22 error Exit status 1
23 error Failed at the storybook-sandbox@1.0.0 test script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

[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 30 days. Thanks!

[stale]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[jerlam06]

I have got the very same issue.

[danbamber]

After trying upgrading Storybook, downgrading Jest and a few other things.
I found adding a .babelrc file to the root of my project with this inside fixed it for me:

{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}

I believe this is needed for Jest to work with Storyshot.
I'm not using Create React App so that's probably why most people aren't having this issue.
Hope this helps someone