Storybook: [Storyshots] SyntaxError: Unexpected token import

[orlov-vo]

Issue details

I tried to add the add-on "storyshots" to my big project for testing stories. But I can't connect everything together to make it work.

Steps to reproduce

> jest

 FAIL  src/storyshots.test.js
  ● Test suite failed to run

    /Users/orlov/frontend/node_modules/lodash-es/flattenDeep.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import baseFlatten from './_baseFlatten.js';
                                                                                             ^^^^^^

    SyntaxError: Unexpected token import

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:318:17)
      at Object.<anonymous> (node_modules/@storybook/react/dist/client/preview/element_check.js:16:20)
      at Object.<anonymous> (node_modules/@storybook/react/dist/client/preview/render.js:31:22)

 PASS  src/renderApp.spec.jsx

Test Suites: 1 failed, 1 passed, 2 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        8.841s
Ran all test suites.
npm ERR! Test failed.  See above for more details.

Please specify which version of Storybook and optionally any affected addons that you're running

• @storybook/react 3.3.2
• @storybook/addon-actions 3.3.2
• @storybook/addon-links 3.3.2
• @storybook/addon-storyshots 3.3.2

Affected platforms

• MacOS 10.12.6
• Node v8.9.1 NPM 5.5.1
• Babel 7.0.0.beta.36
• Jest 22.0.4

Screenshots / Screencast / Code Snippets (Optional)

package.json

{
  ...
  "dependencies": {
    "animate.css": "^3.5.2",
    "axios": "^0.15.3",
    "bem-cn-lite": "^3.0.0",
    "bootstrap-sass": "^3.3.7",
    "classnames": "^2.2.5",
    "deep-equal": "^1.0.1",
    "font-awesome": "^4.7.0",
    "immutable": "^3.8.1",
    "moment": "^2.18.1",
    "prop-types": "^15.6.0",
    "prop-types-extra": "^1.0.1",
    "query-string": "^5.0.1",
    "raven-for-redux": "^1.1.1",
    "raven-js": "^3.21.0",
    "react": "^15.6.1",
    "react-ace": "^5.8.0",
    "react-addons-css-transition-group": "^15.4.2",
    "react-addons-shallow-compare": "^15.6.0",
    "react-bootstrap": "^0.31.5",
    "react-clipboard.js": "^1.1.2",
    "react-dates": "^12.1.2",
    "react-dom": "^15.6.1",
    "react-favicon": "0.0.11",
    "react-intercom": "^1.0.14",
    "react-maskedinput": "^4.0.0",
    "react-nl2br": "^0.2.0",
    "react-redux": "^5.0.2",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "react-router-redux": "^5.0.0-alpha.9",
    "react-select": "^1.0.0-rc.2",
    "react-table-components": "0.0.12",
    "react-transition-group": "^1.1.3",
    "react-universal-component": "^2.8.0",
    "redux": "^3.6.0",
    "redux-notifications": "^3.1.0",
    "redux-thunk": "^2.1.0",
    "reselect": "^2.5.4",
    "shortid": "^2.2.6",
    "simple-line-icons": "^2.4.1",
    "socket.io-client": "^1.7.2"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0-beta.36",
    "@babel/polyfill": "^7.0.0-beta.36",
    "@babel/preset-env": "^7.0.0-beta.36",
    "@babel/preset-react": "^7.0.0-beta.36",
    "@babel/preset-stage-2": "^7.0.0-beta.36",
    "@storybook/addon-actions": "^3.3.2",
    "@storybook/addon-links": "^3.3.2",
    "@storybook/addon-storyshots": "^3.3.2",
    "@storybook/react": "^3.3.2",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^8.0.3",
    "babel-jest": "^22.0.4",
    "babel-loader": "^8.0.0-beta.0",
    "babel-plugin-dynamic-import-node": "^1.2.0",
    "babel-plugin-lodash": "^3.3.2",
    "babel-plugin-transform-inline-imports-commonjs": "^1.2.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "copy-webpack-plugin": "^4.3.0",
    "css-loader": "^0.28.0",
    "dotenv": "^4.0.0",
    "eslint": "^4.13.1",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-config-prettier": "^2.9.0",
    "eslint-import-resolver-webpack": "^0.8.3",
    "eslint-plugin-import": "^2.8.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-prettier": "^2.4.0",
    "eslint-plugin-react": "^7.5.1",
    "exports-loader": "^0.6.4",
    "extract-text-webpack-plugin": "^3.0.2",
    "faker": "^4.1.0",
    "file-loader": "^1.1.6",
    "html-webpack-plugin": "^2.30.1",
    "husky": "^0.14.3",
    "jest": "^22.0.4",
    "jest-css-modules": "^1.1.0",
    "jest-junit": "^3.4.1",
    "jsdom": "^11.5.1",
    "lint-staged": "^6.0.0",
    "node-sass": "^4.7.2",
    "prettier": "1.9.2",
    "prettier-eslint-cli": "^4.6.1",
    "react-test-renderer": "^15.6.2",
    "regenerator-runtime": "^0.11.1",
    "sass-loader": "^6.0.3",
    "style-loader": "^0.19.1",
    "url-loader": "^0.6.2",
    "webpack": "^3.10.0",
    "webpack-blocks": "^1.0.0-rc.2",
    "webpack-dev-server": "^2.9.7",
    "webpack-manifest-plugin": "^1.3.2",
    "webpack-sentry-plugin": "^1.14.1"
  }
}

.babelrc

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": ["last 2 versions", "ie 11"]
      }
    }],
    "@babel/preset-react",
    "@babel/preset-stage-2"
  ],
  "env": {
    "production": {
      "plugins": [
        "transform-react-remove-prop-types",
        "transform-react-constant-elements",
        "transform-react-inline-elements"
      ]
    },
    "test": {
      "plugins": [
        "dynamic-import-node"
      ]
    }
  }
}

jest.config.js

module.exports = {
  modulePaths: ['<rootDir>/src', '<rootDir>/node_modules'],
  setupFiles: ['<rootDir>/jestSetup.js'],
  moduleNameMapper: {
    '.*\\.(css|less|styl|scss|sass)$': '<rootDir>/src/__mocks__/styleMock.js',
    '.*\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '<rootDir>/src/__mocks__/imageMock.js',
  },
};

storyshots.test.js

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

initStoryshots();

[igor-dv]

Yeah, there was a regression. Please try v3.3.3

[ndelangen]

I had the same problem, I fixed it using by adding the lodash-es module to the jest transformIgnorePatterns:

"transformIgnorePatterns": [
  "(node_modules)(?!/lodash-es/)"
],

[ndelangen]

I think that closes this issue, this was addressed in 3.3.3 right?