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-compare":"^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-components":"^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.
I 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
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With