Storybook: App can't find initStoryshots import from @storybook/addon-storyshots

[sbcreates]

Describe the bug
I'm using Storybook in one of my packages in a monorepo using Yarn Workspaces and React. Storybook works as expected but I'm having an issue when I try and run a basic Storyshots test within this package. I run my script yarn test which initiates jest and I receive an error that initStoryshots is an unexpected identifier.

To Reproduce

monorepo
--packages
----package1
----package2
----package3  //this package uses storybook
------.storybook
------src
--------components
--------stories
--------Storyshots.test.js
------jest.config.js
------package.json
------webpack.config.js

---

.storybook/config.js

import { configure, addDecorator } from "@storybook/react";
import { withKnobs } from "@storybook/addon-knobs";
import { configure as config } from "enzyme";
import Adapter from "enzyme-adapter-react-16";

// Add Knobs addon globally
addDecorator(withKnobs);

function loadStories() {
  const req = require.context("../src/stories", true, /\.stories\.js$/);
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

// Configure enzyme
config({ adapter: new Adapter() });

---

Storyshots.test.js

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

initStoryshots();

---

jest.config.js

module.exports = {
    clearMocks: true,
    testEnvironment: "node".
};

---

package.json

{
  "name": "package3",
  "version": "1.0.0",
  "main": "dist/package3.js",
  "scripts": {
    "test": "jest",
    "build": "webpack",
    "storybook": "start-storybook"
  },
  "dependencies": {
    "react": "16.9.0",
    "react-dom": "16.9.0",
    "react-router-dom": "4.3.1"
  },
  "devDependencies": {
    "@babel/core": "7.5.5",
    "@babel/preset-env": "7.5.5",
    "@babel/preset-react": "7.0.0",
    "@storybook/addon-storyshots": "5.2.5",
    "@storybook/react": "5.2.0-rc.6",
    "babel-jest": "24.9.0",
    "enzyme": "3.10.0",
    "enzyme-adapter-react-16": "1.14.0",
    "enzyme-to-json": "3.4.0",
    "jest": "24.8.0",
    "jest-styled-components": "6.3.3",
    "react-test-renderer": "16.9.0",
    "storybook-addon-specifications": "2.1.5",
    "styled-components": "4.4.0",
    "webpack": "4.39.1",
    "webpack-cli": "3.1.2"
  },
  "peerDependencies": {
    "styled-components": ">= 4"
  }
}

---

webpack.config.js

const path = require("path");

module.exports = {
  entry: "./src/components/index.js",
  module: {
    rules: [
      {
        test: /\.(js)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"]
          }
        }
      }
    ]
  },
  externals: {
    jsdom: "window",
    cheerio: "window",
    "react/lib/ExecutionEnvironment": true,
    "react/lib/ReactContext": "window",
    "react/addons": true,
    "styled-components": {
      commonjs: "styled-components",
      commonjs2: "styled-components",
      amd: "styled-components"
    }
  },
  output: {
    filename: "package3.js",
    path: path.resolve(__dirname, "dist"),
    library: "package3-ui",
    libraryTarget: "umd"
  }
};

---

Expected behavior
initStoryshots is imported and runs in the test as passing

Screenshots

Code snippets
If applicable, add code samples to help explain your problem.

System:
Environment Info:

System:
OS: Linux 4.15 Ubuntu 18.04.1 LTS (Bionic Beaver)
CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
Binaries:
Node: 12.10.0 - /usr/bin/node
Yarn: 1.17.3 - /usr/bin/yarn
npm: 6.10.3 - /usr/bin/npm
Browsers:
Chrome: 72.0.3626.121
Firefox: 70.0

Additional context
I'm sure this may have to do with the monorepo setup but unsure

[Bilb]

Hey @shilman , I have the same issue. How did you solve it?

[christian-valadez]

I have the same issue as well - has anyone found a fix for this?

[shilman]

This looks like you need to run the files through babel to get the ESM import syntax. Here's how we do it in Storybook monorepo: https://github.com/storybookjs/storybook/blob/next/jest.config.js#L45

[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