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

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.

[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