So recently, I migrated from React 15.4.2 to React 16.0.0. Here are my current versions in project:
{
"jest":{
"verbose":true,
"automock":false,
"testRegex":"\\.test\\.js$",
"moduleNameMapper":{
"config":"<rootDir>/src/config/test.js",
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/src/__tests__/__mocks__/fileMock.js",
"\\.(css|less|scss)$":"<rootDir>/src/__tests__/__mocks__/styleMock.js",
"\\Api.(js)$":"<rootDir>/src/__tests__/__mocks__/apiMock.js"
},
"coveragePathIgnorePatterns":[
"<rootDir>/src/utils/svgVisualization.js"
],
"unmockedModulePathPatterns":[
"react"
],
"moduleFileExtensions":[
"js",
"json"
],
"modulePathIgnorePatterns":[
"/node_modules/"
],
"testPathIgnorePatterns":[
"/node_modules/"
],
"setupFiles":[
"<rootDir>/src/__tests__/__mocks__/storageMock.js"
]
},
"main":"src/index.js",
"scripts":{
"clean":"rimraf dist/*",
"copy":"copyfiles -f ./src/index.html ./dist",
"dist":"npm run clean && npm run copy && webpack --progress --bail --env dist -p",
"dev":"npm run clean && npm run copy && webpack --progress --bail --env dev -p",
"lint":"esw webpack.config.* src tools --color",
"lint:watch":"npm run lint -- --watch",
"release:major":"npm version prerelease && git push --follow-tags && npm publish --tag beta",
"release:minor":"npm version prerelease && git push --follow-tags && npm publish --tag beta",
"release:patch":"npm version prerelease && git push --follow-tags && npm publish --tag beta",
"serve:dev":"webpack-dev-server --open --env dev",
"serve:dist":"webpack-dev-server --open --env dist -p --progress",
"open:src":"npm run serve:dev",
"start":"npm-run-all --parallel open:src lint:watch",
"test":"jest --coverage"
},
"devDependencies":{
"babel-core":"^6.7.6",
"babel-eslint":"^7.1.0",
"babel-jest":"^20.0.3",
"babel-loader":"^6.2.4",
"babel-plugin-istanbul":"^3.0.0",
"babel-plugin-transform-class-properties":"^6.24.1",
"babel-plugin-transform-decorators-legacy":"^1.3.4",
"babel-plugin-transform-object-rest-spread":"^6.8.0",
"babel-polyfill":"^6.9.0",
"babel-preset-airbnb":"^2.0.0",
"babel-preset-es2015":"^6.24.1",
"babel-preset-es2015-native-modules":"^6.6.0",
"babel-preset-react":"^6.24.1",
"chai":"^4.1.2",
"copyfiles":"^1.0.0",
"css-loader":"^0.28.7",
"enzyme":"^3.1.0",
"enzyme-adapter-react-16":"^1.0.1",
"eslint":"^4.1.1",
"eslint-config-airbnb":"^15.1.0",
"eslint-loader":"^1.3.0",
"eslint-plugin-import":"^2.2.0",
"eslint-plugin-jsx-a11y":"^5.1.1",
"eslint-plugin-react":"^7.1.0",
"file-loader":"^1.1.4",
"jest":"^21.2.1",
"jest-enzyme":"^4.0.0",
"karma":"^1.0.0",
"karma-chai":"^0.1.0",
"karma-chrome-launcher":"^2.1.1",
"karma-coverage":"^1.0.0",
"karma-junit-reporter":"^1.0.0",
"karma-mocha":"^1.0.1",
"karma-mocha-reporter":"^2.0.3",
"karma-phantomjs-launcher":"^1.0.0",
"karma-sinon":"^1.0.5",
"karma-sourcemap-loader":"^0.3.7",
"karma-webpack":"^2.0.4",
"mocha":"^3.0.0",
"node-sass":"^4.5.3",
"npm-run-all":"^4.0.2",
"null-loader":"^0.1.1",
"phantomjs-prebuilt":"^2.1.7",
"postcss":"^6.0.12",
"postcss-loader":"^2.0.6",
"react-addons-test-utils":"^15.0.1",
"react-test-renderer":"^16.0.0",
"rimraf":"^2.5.2",
"sass-loader":"^6.0.6",
"sinon":"^4.0.0",
"style-loader":"^0.18.2",
"url-loader":"^0.5.7",
"webpack":"^3.6.0",
"webpack-bundle-size-analyzer":"^2.7.0",
"webpack-dev-server":"^2.1.0-beta"
},
"dependencies":{
"@types/react":"^16.0.2",
"babel-plugin-import":"^1.2.1",
"babel-polyfill":"^6.23.0",
"cross-env":"^5.0.5",
"es6-tween":"^3.3.0",
"eslint-watch":"^3.0.0",
"image-webpack-loader":"^3.2.0",
"immutable":"^3.8.1",
"jwt-decode":"^2.1.0",
"lodash":"^4.17.4",
"material-ui":"0.19.3",
"moment":"^2.18.1",
"nock":"^9.0.13",
"prop-types":"^15.5.8",
"react":"^16.0.0",
"react-addons-css-transition-group":"^15.4.2",
"react-addons-shallow-pare":"^15.5.2",
"react-bootstrap":"^0.31.3",
"react-breadcrumbs":"^1.5.2",
"react-dnd":"^2.4.0",
"react-dnd-html5-backend":"^2.4.1",
"react-dom":"^16.0.0",
"react-ga":"^2.2.0",
"react-helmet":"^5.0.0-beta",
"react-hot-loader":"^3.0.0-beta.6",
"react-redux":"^5.0.3",
"react-router":"^3.0.0",
"react-tap-event-plugin":"^3.0.2",
"react-tooltip":"^3.3.0",
"reactour":"^1.0.1",
"redux":"^3.6.0",
"redux-form":"^7.0.4",
"redux-logger":"^3.0.6",
"redux-mock-store":"^1.2.3",
"redux-thunk":"^2.2.0",
"styled-ponents":"^2.1.1",
"superagent":"^3.5.0",
"svg.js":"^2.6.2",
"three":"^0.87.1",
"throttle-debounce":"^1.0.1",
"universal-cookie":"^2.0.8",
"webpack":"^3.6.0",
"whatwg-fetch":"^2.0.2"
}
}
Along with React, I migrated to Enzyme 3.6.0 and started using enzyme-adapter-react, so in my entry file to tests (src/config.test.js) I did this:
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });
When I try to run tests with jest as I would usually, I get the error as in the title.
Also, if I try to use jest-enzyme and add this to my jest configuration:
"setupTestFrameworkScriptFile": "./node_modules/jest-enzyme/lib/index.js",
I get another error :
TypeError: Super expression must either be null or a function, not undefined.
So I am kinda stuck, whatever I try, I cannot make my tests work. Any help is appreciated.
So recently, I migrated from React 15.4.2 to React 16.0.0. Here are my current versions in project:
{
"jest":{
"verbose":true,
"automock":false,
"testRegex":"\\.test\\.js$",
"moduleNameMapper":{
"config":"<rootDir>/src/config/test.js",
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/src/__tests__/__mocks__/fileMock.js",
"\\.(css|less|scss)$":"<rootDir>/src/__tests__/__mocks__/styleMock.js",
"\\Api.(js)$":"<rootDir>/src/__tests__/__mocks__/apiMock.js"
},
"coveragePathIgnorePatterns":[
"<rootDir>/src/utils/svgVisualization.js"
],
"unmockedModulePathPatterns":[
"react"
],
"moduleFileExtensions":[
"js",
"json"
],
"modulePathIgnorePatterns":[
"/node_modules/"
],
"testPathIgnorePatterns":[
"/node_modules/"
],
"setupFiles":[
"<rootDir>/src/__tests__/__mocks__/storageMock.js"
]
},
"main":"src/index.js",
"scripts":{
"clean":"rimraf dist/*",
"copy":"copyfiles -f ./src/index.html ./dist",
"dist":"npm run clean && npm run copy && webpack --progress --bail --env dist -p",
"dev":"npm run clean && npm run copy && webpack --progress --bail --env dev -p",
"lint":"esw webpack.config.* src tools --color",
"lint:watch":"npm run lint -- --watch",
"release:major":"npm version prerelease && git push --follow-tags && npm publish --tag beta",
"release:minor":"npm version prerelease && git push --follow-tags && npm publish --tag beta",
"release:patch":"npm version prerelease && git push --follow-tags && npm publish --tag beta",
"serve:dev":"webpack-dev-server --open --env dev",
"serve:dist":"webpack-dev-server --open --env dist -p --progress",
"open:src":"npm run serve:dev",
"start":"npm-run-all --parallel open:src lint:watch",
"test":"jest --coverage"
},
"devDependencies":{
"babel-core":"^6.7.6",
"babel-eslint":"^7.1.0",
"babel-jest":"^20.0.3",
"babel-loader":"^6.2.4",
"babel-plugin-istanbul":"^3.0.0",
"babel-plugin-transform-class-properties":"^6.24.1",
"babel-plugin-transform-decorators-legacy":"^1.3.4",
"babel-plugin-transform-object-rest-spread":"^6.8.0",
"babel-polyfill":"^6.9.0",
"babel-preset-airbnb":"^2.0.0",
"babel-preset-es2015":"^6.24.1",
"babel-preset-es2015-native-modules":"^6.6.0",
"babel-preset-react":"^6.24.1",
"chai":"^4.1.2",
"copyfiles":"^1.0.0",
"css-loader":"^0.28.7",
"enzyme":"^3.1.0",
"enzyme-adapter-react-16":"^1.0.1",
"eslint":"^4.1.1",
"eslint-config-airbnb":"^15.1.0",
"eslint-loader":"^1.3.0",
"eslint-plugin-import":"^2.2.0",
"eslint-plugin-jsx-a11y":"^5.1.1",
"eslint-plugin-react":"^7.1.0",
"file-loader":"^1.1.4",
"jest":"^21.2.1",
"jest-enzyme":"^4.0.0",
"karma":"^1.0.0",
"karma-chai":"^0.1.0",
"karma-chrome-launcher":"^2.1.1",
"karma-coverage":"^1.0.0",
"karma-junit-reporter":"^1.0.0",
"karma-mocha":"^1.0.1",
"karma-mocha-reporter":"^2.0.3",
"karma-phantomjs-launcher":"^1.0.0",
"karma-sinon":"^1.0.5",
"karma-sourcemap-loader":"^0.3.7",
"karma-webpack":"^2.0.4",
"mocha":"^3.0.0",
"node-sass":"^4.5.3",
"npm-run-all":"^4.0.2",
"null-loader":"^0.1.1",
"phantomjs-prebuilt":"^2.1.7",
"postcss":"^6.0.12",
"postcss-loader":"^2.0.6",
"react-addons-test-utils":"^15.0.1",
"react-test-renderer":"^16.0.0",
"rimraf":"^2.5.2",
"sass-loader":"^6.0.6",
"sinon":"^4.0.0",
"style-loader":"^0.18.2",
"url-loader":"^0.5.7",
"webpack":"^3.6.0",
"webpack-bundle-size-analyzer":"^2.7.0",
"webpack-dev-server":"^2.1.0-beta"
},
"dependencies":{
"@types/react":"^16.0.2",
"babel-plugin-import":"^1.2.1",
"babel-polyfill":"^6.23.0",
"cross-env":"^5.0.5",
"es6-tween":"^3.3.0",
"eslint-watch":"^3.0.0",
"image-webpack-loader":"^3.2.0",
"immutable":"^3.8.1",
"jwt-decode":"^2.1.0",
"lodash":"^4.17.4",
"material-ui":"0.19.3",
"moment":"^2.18.1",
"nock":"^9.0.13",
"prop-types":"^15.5.8",
"react":"^16.0.0",
"react-addons-css-transition-group":"^15.4.2",
"react-addons-shallow-pare":"^15.5.2",
"react-bootstrap":"^0.31.3",
"react-breadcrumbs":"^1.5.2",
"react-dnd":"^2.4.0",
"react-dnd-html5-backend":"^2.4.1",
"react-dom":"^16.0.0",
"react-ga":"^2.2.0",
"react-helmet":"^5.0.0-beta",
"react-hot-loader":"^3.0.0-beta.6",
"react-redux":"^5.0.3",
"react-router":"^3.0.0",
"react-tap-event-plugin":"^3.0.2",
"react-tooltip":"^3.3.0",
"reactour":"^1.0.1",
"redux":"^3.6.0",
"redux-form":"^7.0.4",
"redux-logger":"^3.0.6",
"redux-mock-store":"^1.2.3",
"redux-thunk":"^2.2.0",
"styled-ponents":"^2.1.1",
"superagent":"^3.5.0",
"svg.js":"^2.6.2",
"three":"^0.87.1",
"throttle-debounce":"^1.0.1",
"universal-cookie":"^2.0.8",
"webpack":"^3.6.0",
"whatwg-fetch":"^2.0.2"
}
}
Along with React, I migrated to Enzyme 3.6.0 and started using enzyme-adapter-react, so in my entry file to tests (src/config.test.js) I did this:
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });
When I try to run tests with jest as I would usually, I get the error as in the title.
Also, if I try to use jest-enzyme and add this to my jest configuration:
"setupTestFrameworkScriptFile": "./node_modules/jest-enzyme/lib/index.js",
I get another error :
TypeError: Super expression must either be null or a function, not undefined.
So I am kinda stuck, whatever I try, I cannot make my tests work. Any help is appreciated.
Share Improve this question edited Nov 6, 2018 at 21:38 skyboyer 23.7k7 gold badges62 silver badges71 bronze badges asked Oct 4, 2017 at 18:43 Aleksandar OgrizovicAleksandar Ogrizovic 531 silver badge6 bronze badges 2- I actually stumbled upon that issue and it didn't help me at all :/ – Aleksandar Ogrizovic Commented Oct 4, 2017 at 18:59
-
Still working through this myself, but if I wrap the call to
configurein an IIFE, the warning goes away. It seems like there's some monkey business where create-react-app (or jest?) is running the code in setupTests.js before performing the enzyme import. This doesn't totally solve the problem, since I'm apparently getting warnings from my test files before my setup is run. – jstaab Commented Oct 6, 2017 at 16:09
3 Answers
Reset to default 14I was getting the same error. I found out my mistake was.
import shallow from 'enzyme';
I changed it to
import {shallow} from 'enzyme';
What helped me is the following: Rename alias from 'config' to something else e.g. 'my-config'. in moduleNameMapper:{ "my-config":"/src/config/test.js" ...}
and of course change imports in your js code. And should work.
It must have ben some name conflicts in enzyme or other dependencies.
Ran into this as well. In my case the problem was a bad setup that was redirecting any module whose name contained the substring configuration to my local environment-specific config.
In my specific case, with Jest, the fix was changing the jest moduleNameWrapper setting in package.json so that the key that redirected to my config was ^config$ instead of just config.