Storybook: Storyshots gives an error Cannot create property 'STORYBOOK_REACT_CLASSES' on boolean 'true'

[mcreations]

I am trying to get storybook storyshots addon run within my react project. I have storybook shows up without any issues but when I try to run storyshots with jest it gives me below error.

test/sum.test.js
FAIL test/storyshots.test.js
::Test suite failed to run

TypeError: Cannot create property 'STORYBOOK_REACT_CLASSES' on boolean 'true'

> 1 | import initStoryshots from '@storybook/addon-storyshots';
    | ^
  2 |
  3 | initStoryshots({ /* configuration options */ })

  at Object.<anonymous> (node_modules/@storybook/addon-storyshots/dist/index.js:50:42)
  at Object.<anonymous> (test/storyshots.test.js:1:1)

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

Steps to reproduce

I am using React 16

below is an extract from package .json
"scripts": {
"lint": "eslint ./src",
"testonly": "mocha $npm_package_options_mocha",
"test": "jest",
"testlint": "npm run lint && npm run testonly",
"test-watch": "npm run testonly -- --watch --watch-extensions js",
"storybook": "gulp copyassets & start-storybook -p 9001 -c .storybook -s ./src/assets",
"build-storybook": "build-storybook -c .storybook -o ./static",
"prepublish": "gulp",
"test-storybook": "storyshots",
},
"devDependencies": {
"@storybook/addon-info": "^3.3.3",
"@storybook/addon-knobs": "^3.3.3",
"@storybook/addon-storyshots": "^3.4.8",
"@storybook/react": "^3.3.3",
"babel-cli": "^6.22.2",
"babel-core": "^6.26.3",
"babel-eslint": "^6.0.2",
"babel-jest": "^23.2.0",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-transform-class-properties": "^6.22.0",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.22.0",
"babel-preset-stage-0": "^6.22.0",
"chai": "^3.5.0",
"co-mocha": "^1.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.26.1",
"del": "^2.2.2",
"enzyme": "^3.3.0",
"eslint": "^2.7.0",
"eslint-plugin-babel": "^3.1.0",
"eslint-plugin-react": "^4.2.3",
"gulp": "^3.9.1",
"gulp-babel": "^6.1.2",
"gulp-concat": "^2.6.1",
"gulp-cssnano": "^2.1.2",
"gulp-if": "^2.0.2",
"gulp-postcss": "^7.0.0",
"gulp-print": "^2.0.1",
"gulp-sass": "3.1.0",
"gulp-sourcemaps": "^2.6.0",
"gulp-string-replace": "^0.4.0",
"gulp-uglify": "^2.0.1",
"ignore-styles": "^5.0.1",
"jest": "^23.3.0",
"jsdom": "^8.1.0",
"mocha": "^2.4.5",
"moment": "^2.18.1",
"node-sass": "4.2.0",
"nodemon": "^1.9.1",
"postcss-flexibility": "^2.0.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-select": "^1.2.0",
"react-test-renderer": "^16.4.1",
"react-transition-group": "^2.2.1",
"regenerator-runtime": "^0.12.0",
"sass-loader": "^6.0.6",
"sinon": "^1.17.3",
"storybook-addon-props": "^3.0.3",
"storybook-addon-smart-knobs": "^3.2.10",
"style-loader": "^0.13.1",
"webpack": "^3.10.0"
},
"peerDependencies": {
"react": "^16.0.0",
"react-dom": "^16.0.0"
},
"dependencies": {
"axios": "^0.15.3",
"babel-polyfill": "^6.26.0",
"babel-preset-stage-0": "^6.22.0",
"babel-runtime": "^6.6.1",
"classnames": "^2.2.5",
"colors": "^1.1.2",
"cq-prolyfill": "^0.3.3",
"create-react-class": "^15.6.2",
"debug": "^2.2.0",
"defaults": "^1.0.2",
"immutability-helper": "^2.6.5",
"lodash": "^4.17.5",
"match-sorter": "^1.6.0",
"mkdirp": "^0.5.1",
"nightmare": "^2.0.3",
"pngjs": "^3.0.1",
"prop-types": "^15.6.0",
"rc-calendar": "^8.3.3",
"rc-tree": "1.7.10",
"react-addons-shallow-compare": "^15.4.2",
"react-dnd": "^2.5.4",
"react-dnd-html5-backend": "^2.5.4",
"react-dnd-multi-backend": "^3.1.2",
"react-dnd-touch-backend": "^0.3.21",
"react-dom-factories": "^1.0.2",
"react-input-autosize": "^2.2.1",
"react-inspector": "^2.2.2",
"react-joyride": "^1.11.1",
"react-router-component": "^0.39.0",
"react-select-fast-filter-options": "^0.2.1",
"react-simple-dropdown": "^3.2.0",
"react-sortable-hoc": "^0.6.8",
"react-table": "6.8.2",
"react-tabs": "^2.2.1",
"react-tooltip": "^3.4.0",
"react-transition-group": "^2.2.1",
"react-virtualized": "^9.18.5",
"react-virtualized-select": "^3.1.3",
"recharts": "^1.0.0-alpha.4",
"scroll-into-view": "^1.8.2",
"sprintf-js": "^1.0.3",
"thunkify": "^2.1.2",
"vo": "^1.0.3"
}
}

storyshots.test.js
import initStoryshots from '@storybook/addon-storyshots';

initStoryshots({ /* configuration options */ })

I am using below storybook version from package json
"@storybook/addon-info": "^3.3.3",
"@storybook/addon-knobs": "^3.3.3",
"@storybook/addon-storyshots": "^3.4.8",
"@storybook/react": "^3.3.3",

Exact versions
@storybook/addon-info": 3.10.10
@storybook/addon-knobs": 3.10.10,
@storybook/addon-storyshots": "^3.10.10",
@storybook/react": "^3.10.10",

Appreciate any help to run storyshot addon without any errors. Let me know of any configuration issues or dependancy version issues.

Thanks!

[igor-dv]

Did you configure babel-jest in the jest.config.js ?

[mcreations]

Not really. Below is the contents of my jest.config.js file. Where should I add it?
module.exports = {
globals: {
"window": true,
"document": true
},
moduleFileExtensions: [
"js",
"json",
"jsx",
"node",
"es6"
],
testEnvironment: "node",
};

[igor-dv]

You have to add a babel-jest transformer.

[mcreations]

Tried adding the transformer but no luck. Any other options I can try?

[igor-dv]

can you please share the code? also your babelrc

[mcreations]

jest.config.js

module.exports = {
globals: {
"window": true,
"document": true
},
moduleFileExtensions: [
"js",
"json",
"jsx",
"node",
"es6"
],
"transform": {
".*": "babel-jest"
},
testEnvironment: "node",
};

.babelrc

{
"presets": ["es2015", "stage-0", "react", "stage-1", "stage-2", "env"],
"plugins": ["transform-class-properties"]
}

[igor-dv]

Ah, maybe it's related to the "window": true line in your jest.config? can you please remove it

[mcreations]

igor-dv,

Thanks!

Removing "window": true fixed the issue. I searched everywhere and didn't see a fix for this and hope your solution will be useful for others too.

To provide more detail. When I removed window property it gave me an error that window is not defined when running jest test. for that, I changed the testEnvironment: "node" to "jsdom" as mentioned in below post.
https://stackoverflow.com/questions/46274889/jest-test-fails-with-window-is-not-defined#